由于某种原因，图片无法在文章和文章中居中显示

时间：2018-09-17 09:30:35

标签： html5 css3

我正在尝试将图像居中放在<article>和<aside>中，但是我不确定代码有什么问题。我尝试使用article#tablet进行一些调整，但没有成功。现在，图像位于左侧，无论如何...如果我检查该项目并给其留有边距或填充，它将产生反应。但是不能居中。 

.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>

我将不胜感激。谢谢

4 个答案:

答案 0 :(得分：3)

在这种情况下，您可以使用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>

答案 1 :(得分：1)

您的CSS没有任何图像样式。 要使图像居中，您必须选择图像并为其应用样式，例如自动边距和display: block：

.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;
}

/* Added this */
article img,
aside img {
  display: block;
  margin: 0 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="./img/hand_ipad.png" 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://picsum.photos/200/300" alt="">
  </aside>
</section>
<section class="inner-wrapper">
  <article>
    <img src="https://picsum.photos/300/300" 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>

答案 2 :(得分：1)

您想将图像居中放在<aside>和<article>内部吗？ 只需在旁边和文章中添加属性：text-align : center，其中的图像将居中。 在Codepen中检出更多详细信息 https://codepen.io/anon/pen/PddMYZ

或仅在此处提供必要的代码（css文件）：

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

article {
  float: left;
  margin: 0 auto;
  width: 50%;
  height: auto;
  text-align : center;
}

#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;
}

aside{
  text-align : center;
}

答案 3 :(得分：1)

这是另一种简单的方法。

我将图像包装在div中，并为此div添加了单个css行。

section {
  float: left;
  width: 100%;
  background-color: #C3D7DF;
}

article {
  float: left;
  width: 50%;
  background-color: #A2B2C1;
}

aside {
  float: right;
  width: 50%;
  background-color: #C3D7DF;
}

/*css which I have added*/
.img-wrapper {
  text-align: center;
}
<section>

  <article>
    <h2>Article Block.</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>
    <div class="img-wrapper">
      <img src="https://via.placeholder.com/150x150" alt="">
    </div>
  </article>

  <aside>
    <h2>Aside Block.</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>
    <div class="img-wrapper">
      <img src="https://via.placeholder.com/150x150" alt="">
    </div>
  </aside>
</section>

相关问题
最新问题