Question

我正在创建缩略图响应页面，并且需要居中。我用％定义元素的大小。因此，当我尝试将容器中的所有内容居中时，它不起作用，因为左边元素的左边距也有一个边距％。这是我的HTML：

<div class="thumb-container">        
        <div class="clearfix">    
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
       </div>                 
</div>

和CSS：

 .clearfix {
        overflow: auto;}
    .thumb-container {
        width: 92%;
        margin: 0 auto 0;
        padding-top: 67px;  
        +clearfix;}
    .thumb-unit {
        display: block;
        width: 27%;
        padding-top: 35%;
        margin-left: 5.55556%;

        margin-top: 4.33%;
        float: left;
        position: relative;
        overflow: hidden;}

Answer 1

你的css风格很混乱。你可以在这里只使用两个类来获得你想要的东西。试试下面这个。

HTML：

<div class="thumb-container">        
        <div class="clearfix">    
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
       </div>                 
</div>

CSS： a.thumb-unit { 显示：块; margin-left：auto; margin-right：auto}

.thumb-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex; /* add */
        justify-content: center; /* add to align horizontal */
        align-items: center; /* add to align vertical */
    }

检查工作小提琴here

Answer 2

您应该为0 auto课程尝试thumb-unit的余量。您还可以删除一些不必要的CSS，以便稍微整理一下。

以缩略图为中心的问题

2 个答案: