css 在 div 中水平居中 div

Question

我正在尝试使页面上的块元素水平居中。

这是我想要的示例：

我不能使用 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

您仍然可以使用具有 "hard" 大小的响应式布局。您可以在 CSS 文件的底部使用一种称为媒体查询的东西，当页面达到一定大小时，它将根据您指定的内容调整元素。这是一些示例代码：

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

让我知道这是否有意义或者您是否需要更多解释。一开始可能有点令人困惑，但是一旦你了解它并看到它的实际效果，它就非常简单明了。

Answer 3

只需使用 width:100% 做包装器 div，在 div 中创建另一个 div 具有您想要的总宽度和边距：0 auto 并在其中创建3 divs，宽度为 33%，float:left

<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

css Horizontally center div in a div

html

css

alignment