如何将整个图像居中并将图像对齐？

时间：2018-03-14 07:12:37

标签： html css

我在我正在制作的网站上有一个图片库。 我想将图片库放在中心位置，所以我添加了＃text; align：center＆＃39;它。 它工作正常，但我想要的是将整个图像库置于页面中心，并仍然将图像放在其中。 我该怎么做？

enter image description here

HTML 

bottom

CSS 

<section>
  <article class="img1">
    <a href=""><img src="img/img1.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="img/img2.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="img/img3.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
</section>

5 个答案:

答案 0 :(得分：2)

只需更改text-align：center; to text-align：left;在主要部分。您将获得所需的布局。您的HTML布局将是相同的。

section {
  margin-top: 100px;
  text-align: left;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin: 0 1%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}

答案 1 :(得分：1)

您必须从父元素和gallery元素中的图像对齐图库。我不知道你的画廊的父元素是什么，所以我用class image-container创建了一个div。请参阅下面的plunkr中的解决方案。

编辑：更新了CSS以使用text-align的flex-box insted。有关详细信息，请参阅CSS中的注释

＆＃13;
＆＃13; 
.image-container{
        /*This CSS centers the whole gallery*/
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section {
        background-color: lightgrey; /*Just to better show position of element*/
        margin-top: 100px;
        width: 350px; /*This controls what width you want on the gallery*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    section > article {
        background: darkgrey; /*Just to better show position of element*/
        margin-bottom: 10px;
        display: inline-block;
        vertical-align: top;
        width: 48%; /*This controls how many items that would fit in to a row */
        height: auto;
        padding: 0;
    }


    section > article > a {
        width: 100%;
        display: inline-block; /*This is to make article wrapt the content correctly*/
    }


    article img {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    article dl {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: left;
    }

    article dt {
        font-size: 0.9em;
        font-weight: 400;
    }

    article dd {
        margin-left: 0;
        font-size: 0.9em;
        font-weight: 300;
    }
＆＃13; 
<div class="image-container">
    <section>
      <article class="img1">
        <a href=""><img src="img/img1.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
      <article class="img2">
        <a href=""><img src="img/img2.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
      <article class="img3">
        <a href=""><img src="img/img3.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
    </section>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个

将text-align: left;添加到此选择器.img1, .img2, .img3。

在您的工作中，您将wisth: 100%;添加到img。请删除此内容或添加max-width: 150px;。

喜欢这个 

article img {
  width: 100%;
  max-width: 150px;
}

＆＃13;
＆＃13; 
section {
    margin-top: 100px; /* the gap between top navigation above */
    text-align: center;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin-left: 0 1%;
  padding: 0;
  text-align: left;
}

article img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
＆＃13; 
<section>
    <article class="img1"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
    <article class="img2"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
    <article class="img3"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您需要将max-width设置为section并margin:auto将整个部分置于页面中心，然后应用text-align:left将内部内联元素对齐到左侧...

另外，为什么你的css .img1, .img2, .img3为所有人提供相同的css ...在section中添加自定义类，只使用.gallery article一次或在所有article中使用相同的类{1}}

<强> Fiddle Link

Stack Snippet

＆＃13;
＆＃13; 
section.gallery {
  width: 80%;
  text-align: left;
  background: grey;
  margin: 100px auto 0;
}

.gallery article {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: auto;
  margin-left: 0 1%;
  padding: 0;
  text-align: left;
}

.gallery article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.gallery article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

.gallery article dt {
  font-size: 0.9em;
  font-weight: 400;
}

.gallery article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
＆＃13; 
<section class="gallery">
  <article class="img1">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

更具体的check this，

<强> CSS： 

section {
  margin:0 auto;
  margin-top: 100px;
  display:block;
}
section article {
  display:inline-block;
  position:relative;
  overflow:hidden;
  text-align:center;
}
article img {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  object-fit:cover;
}

让你的HTML原样，我在图像部分做了一些小改动，使它更干净。你不需要添加img1, img2...

希望这可以帮助你。

相关问题
最新问题