Question

我正试图在页面上水平居中一个块元素。

这是我想要的一个例子：

enter image description here

我不能使用div硬件大小，因为布局应该是响应式的。

http://fiddle.jshell.net/rdy9nmp0/

以下是代码：

 <div class = "container">
    <div class="sub">
        <h1> 01</h1>
        <div class = "icon"><img src="img/settings.png" alt="">
            <h2> Power Inside</h2>
            <p>Cum sociis natoque penatibus et magnis dis parturient montesmus. Pro vel nibh et elit mollis commodo et nec augueique</p>
            <a class="iconlink" href="/">Read more</a>
        </div>
    </div>
 <div>

CSS

.container {

    width: 1160px;
    overflow: hidden;
    display: inline-flex;
    margin: 0 auto;
    }

.sub{
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
    padding-left: 30px;
    display: inline-block;
    vertical-align: top; 
}

.sub h1{
    font-size: 90px;
    color: #efeff0;
    font-family: 'Ubuntu', sans-serif;
    padding: 0px;
    float:left;
}

.sub img
{
    padding: 10px 0px 10px 0px;
}

.sub h2  {
    color: #2a2b2e;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
}

.sub p {
    color: #8a8a8a;
    font-size: 13px;
    font-family: 'Arial', sans-serif;
}
.sub .icon{
    overflow: hidden;
    padding-left:20px;
}
.sub .iconlink{
    font-size: 13px;
    color: #2a2b2e;
    height: 28px;
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-decoration: none;
    vertical-align:baseline;
    font-weight: bold;
    font-family: 'Ubuntu', sans-serif;
    background: url(../img/shape_blue.png) no-repeat scroll right center #fff;
    padding: 0 20px 0 0;
    background-position: right;
}

.container .iconlink:hover, .iconlink:hover {
    color: #248cec;
    background: url(../img/shape_grey.png) no-repeat scroll right center #fff; 
    text-decoration: none;
    vertical-align:baseline;
    background-position: right;
}
.container .iconlink a:active {
    color: #248cec;
}

img {
    display:inline-block;
}

Answer 1

这应该得到你想要的。

.container {
    display: flex; /*rather than inline-flex*/
}

如果确实需要inline-flex而不是制作父元素text-align:center;

Answer 2

你仍然可以使用＆＃34; hard＆＃34;浆纱。您可以在CSS文件的底部使用称为媒体查询的内容，当页面达到一定大小时，它会根据您指定的内容调整元素。以下是一些示例代码：

     @media (max-width: 400px) {
       div {
         width: 20px;
        }
      }

如果这有意义，或者您需要更多解释，请告诉我。起初它可能有点令人困惑，但是一旦你得到它并看到它在行动它是非常切割和干燥。

Answer 3

只做宽度为100％的包装div，在div内部创建另一个div，其中包含您想要的总宽度和边距：0自动，其中一个创建3个div，宽度为33％，浮动：左

<div class="container">
        <div class="subcont">
           <div><p>This is div1</p></div>
           <div><p>This is div2</p></div>
           <div><p>This is div3</p></div>
        </div>
    </div>

div:not(.container):not(.subcont){
    float: left;
    width: 33%;
    margin: 0 auto;
}

.container{
    text-align: center;
    width: 100%;
    background: green;
    overflow: hidden;
}

.subcont{
    margin: 0 auto;
    width: 50%;
    background: red;
    overflow: hidden;
}

示例：http://jsfiddle.net/cbmkg2e5/

css在div中水平居中div

3 个答案: