html - 由于某种原因，图像不会在文章和旁白中居中

Question

我正在尝试将图像置于我的 <article> 中和 <aside> ，我不确定代码有什么问题。我尝试使用 article#tablet 进行一些调整但没有成功。现在图像位于左侧，无论如何......如果我检查元素并给它一个边距或填充它会使用react。但不能居中。

.inner-wrapper {
  float: left;
  width: 100%;
  background-color: #C3D7DF;
}

article {
  float: left;
  margin: 0 auto;
  width: 50%;
  height: auto;
}

#tablet {
  background-color: #C3D7DF;
}

aside {
  float: right;
  margin: 0 auto;
  width: 50%;
  height: auto;
}

#tablet2 {
  background-color: #A2B2C1;
}

#mobile {
  background-color: #BEB9AD;
}

#desktop {
  background-color: #F1AA90;
}

.inner-wrapper-2 {
  float: left;
  width: 100%;
  background-color: #C3D7DF;
}

<section class="inner-wrapper">
  <article id="tablet">
    <img src="https://via.placeholder.com/150x150" alt="">
  </article>
  <aside id="tablet2">
    <h2>MOBILE. TABLET. DESKTOP.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
  </aside>
</section>
<section class="inner-wrapper-2">
  <article id="mobile">
    <h2>ACROSS EACH DEVICE</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
  </article>
  <aside>
    <img src="https://via.placeholder.com/150x150" alt="">
  </aside>
</section>
<section class="inner-wrapper">
  <article>
    <img src="https://via.placeholder.com/150x150" alt="">
  </article>
  <aside id="desktop">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
  </aside>
</section>

如有任何帮助，我将不胜感激。谢谢

Answer 1

在这种情况下，您可以使用 flexbox。根据您的需要，正确使用align-items 和justify-content即可。

.inner-wrapper {
  float: left;
  width: 100%;
  background-color: #C3D7DF;
  display: flex;
  align-items: center;
}

article {
  float: left;
  margin: 0 auto;
  width: 50%;
  height: auto;
}

.img-wrapper img {
  width: 50px;
  height: 50px;
}

.img-wrapper {
  display: inline-flex;
  align-items: center; /**Vertical */
  justify-content: center; /**Horizontal */
  height: 100%;
  flex: 1;
}

#tablet {
  background-color: #C3D7DF;
}

aside {
  float: right;
  margin: 0 auto;
  width: 50%;
  height: auto;
}

#tablet2 {
  background-color: #A2B2C1;
}

#mobile {
  background-color: #BEB9AD;
}

#desktop {
  background-color: #F1AA90;
}

.inner-wrapper-2 {
  float: left;
  width: 100%;
  background-color: #C3D7DF;
}

<section class="inner-wrapper">
  <article id="tablet" class='img-wrapper'>
    <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
  </article>
  <aside id="tablet2">
    <h2>MOBILE. TABLET. DESKTOP.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
  </aside>
</section>
<section class="inner-wrapper">
  <article id="mobile">
    <h2>ACROSS EACH DEVICE</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
  </article>
  <aside class='img-wrapper'>
    <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
  </aside>
</section>
<section class="inner-wrapper">
  <article class='img-wrapper'>
    <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
  </article>
  <aside id="desktop">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
  </aside>
</section>

---