Question

我正在使用现有模板，并尝试更改主页的显示。图像网格的原始设置为2 * 4，我正尝试将其更改为2 * 3网格。但是我不知道如何使图像显示在中心

这是我的html和CSS：

HTML

<div class="gallery">
   <div class="content">

        <div class="media">     
         <a href="images/fulls/01.jpg" class = "class_outer">
         <img src="images/home/01.jpg" alt=""  title="ICC profile）" />
         <span style="text-align:center" class="class_cover">text</span>
         </a>   
        </div>

        <div class="media">     
         <a href="images/fulls/02.jpg" class = "class_outer">
         <img src="images/home/01.jpg" alt=""  title="ICC profile）" />
         <span style="text-align:center" class="class_cover">text</span>
         </a>   
      </div>

   </div>
</div>

CSS：

.media {
    float:left;
    position: relative;
    width: 33%;
    margin:1.66% ;

}
.gallery .content {
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -moz-justify-content: -moz-flex-start;
        -webkit-justify-content: -webkit-flex-start;
        -ms-justify-content: -ms-flex-start;
        justify-content: flex-start;
    }

.gallery .content .media {
            -moz-animation: gallery 0.75s ease-out 0.4s forwards;
            -webkit-animation: gallery 0.75s ease-out 0.4s forwards;
            -ms-animation: gallery 0.75s ease-out 0.4s forwards;
            animation: gallery 0.75s ease-out 0.4s forwards;
            margin-bottom: 0;
            overflow: hidden;
            opacity: 0;
            position: relative;
            width: 25%;
        }

.gallery .content .media a {
                display: block;
            }

.gallery .content .media img {
                -moz-transition: -moz-transform 0.2s ease-in-out;
                -webkit-transition: -webkit-transform 0.2s ease-in-out;
                -ms-transition: -ms-transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out;
                max-width: 100%;
                height: auto;
                vertical-align: middle;
            }

.gallery .content .media:hover img {
                -moz-transform: scale(1.075);
                -webkit-transform: scale(1.075);
                -ms-transform: scale(1.075);
                transform: scale(1.075);
            }

我试图自动更改margin：0并调整CSS中的宽度百分比，但是图像仍在左侧：（

Answer 1

此问题的原因是您的父母div不是孩子，为您建立父母中心的最佳解决方案是将flex与justify-content center结合使用，因此第一步，从您的孩子（。media）中删除float，然后将display: flex添加到您的父div中，并进行居中对齐：

.media {
    position: relative;
    width: 33%;
    margin:1.66% ;

}

.media a img {
    width: 100%;
}

#Parent {
    display: flex;
    justify-content: center;
}

<div id="Parent">
<div class="media">     
 <a href="images/fulls/01.jpg" class = "class_outer">
 <img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt=""  title="ICC profile）" />
 <span style="text-align:center" class="class_cover">text</span>
 </a>   
</div>

<div class="media">     
 <a href="images/fulls/02.jpg" class = "class_outer">
 <img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt=""  title="ICC profile）" />
 <span style="text-align:center" class="class_cover">text</span>
 </a>   
</div>
</div>

Answer 2

Just add this css into your css File, it will automatically center the content.

Css::Align-horizontal center

 .content {
    display:flex;
    justify-content:center;
    }

Css :::垂直对齐+水平中心

 .content {
    display:flex;
    justify-content:center;
    align-items: center;
    }

居中网格图像

2 个答案: