【问题标题】:How do i center a div class?我如何使 div 类居中?
【发布时间】:2015-04-01 05:32:12
【问题描述】:

我无法将 div 类居中。我希望 div 类在页面中居中,因为我滚动时它卡在左侧。我试过将它浮动在中心,但它什么也没做,只是一个业余爱好者,所以不知道还能尝试什么。

HTML

<div class = "container">
    <ul>
        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li><br>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li><br>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>

        <li class = "image">
        <img src = "BlackBox.jpg" height="200px">
        </li>   


    </ul>
</div>

CSS

.image {
display: inline;
padding: 0 10px 10px 10px;
}

.container {
width: 700px;
}

【问题讨论】:

    标签: html css position containers


    【解决方案1】:

    试试这个代码

    .container{
        width: 700px;
         margin: 0 auto;
        }
    

    查看演示http://jsfiddle.net/JentiDabhi/4q9j40m1/

    【讨论】:

    • 谢谢,这正是我想要的。
    【解决方案2】:

    这是因为你的容器宽度。

    更改容器width:500px 或任何其他容器并查看结果。

    您可以使用 align-self 属性使您的 div 居中。

    .container {
            width: 500px;
            align-self: center;
            -webkit-align-self: center;
    }
    

    查看Fiddle.

    【讨论】:

    • 那没有居中。你知道为什么吗?
    【解决方案3】:

    有多种方法可以使您知道的事物居中。水平中心是一回事,垂直中心是另一回事。

    对于水平居中,事情很容易。

    1:给body一个固定宽度,然后margin: 0 auto;

    .parent {
        width: 800px;
        margin: 0 auto;
    }
    
    /* for block level */
    .parent {
        text-align: center;
    }
    
    /* for inline, inline-block */
    .parent {
        position: relative;
    }
    
    .child {
      position: absolute;
      left: 0;
      right: 0;
    }
    

    用于垂直居中 1:将line-height设置为大于字体大小的某个值,

    .child {
        font-size: 12px;
        line-height: 24px;
    }
    /* downside, works for single line text */
    

    图片

    .parent {
        line-height: 200px; /* greater than image size */
    }
    
    .child img {
        vertical-align: middle;
    }
    

    2:餐桌方式

    .parent {
        display: table;
    }
    
    .child {
        display: table-cell;
        vertical-align: middle;
    }
    /* this is equivalent to valign = middle from <table></table> days */
    

    3:定位

    .parent: {
        position: relative;
    }
    
    .child: { 
        position: absolute;
        top: 50%;
        left: 50%;
        /* brings the top left corner to center */
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
        /* set the top and left margins to half the height and width */
    }
    

    4:顶部和底部填充相等

    .parent { 
        padding: 5% 0;
    }
    .child {
        padding: 10% 0;
    }
    

    有一些提到here,检查一下。

    【讨论】:

      【解决方案4】:

      试试这个:

      .container {
          width: 700px;
          margin-left: auto;
          margin-right: auto;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-09-12
        • 1970-01-01
        • 2012-03-22
        • 2013-02-27
        • 2017-01-18
        • 2014-04-11
        • 2015-02-10
        相关资源
        最近更新 更多