Question

我正在尝试将我网站上的一些瓷砖与中心对齐。有4个瓷砖，第一排有两个，第二排有两个。我试图将这些DIV与页面中心对齐，但我无法做到。

我已将margin: 0 auto;添加到父DIV中，并且还包含position: relative和display: inline-block;，如其他一些帖子所建议但尚无法对齐。

以下是我正在编写的代码：

<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="clear"></div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="clear"></div>
</div>

CSS代码：

.parent{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.child{
  float: left;
  margin: 2px auto;
  width: 25%;
  background-color: green;
  position: relative;
  display: inline-block;
}
.clear{
  clear: both;
}

和jsfiddle：http://jsfiddle.net/wj1a2fnj/4/

毕竟，我无法将儿童DIV与中心对齐。我是CSS的新手，现在想办法。任何帮助将不胜感激。

谢谢。

Answer 1

您需要从float: left;移除.child并将text-align: center;添加到.parent div将inline-block子元素置于其中。

试试这个 - DEMO

.parent{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size:0; /* to remove the white space between inline-block elements */
}
.child{
    display: inline-block;
    margin: 2px auto;
    width: 25%;
    background-color: green;
    font-size:16px; /* reset the font size (i.e 1em = 16px) */
}

您还可以在第二个孩子后添加<br>代码而不是<div>代码 - http://jsfiddle.net/p6rkw5ax/

Answer 2

将text-align: center;添加到您的父div，然后就可以了

.parent{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 0; --> To make the space void in between divs
}

添加

.child{ <--float: left;--> REMOVED font-size: 14px; display: inline-block; --> To make the div float next to each other }

<强> WORKING EXAMPLE

Answer 3

text-align: center有效

只需将其添加到CSS的子类中即可。

http://jsfiddle.net/wj1a2fnj/6/

修改

它没有将父div与中心对齐的原因是因为你使用了浮点数。移除浮动并调整margin: 0 auto，您将获得所需内容;

更新小提琴：http://jsfiddle.net/wj1a2fnj/19/

Answer 4

你可以这样做......

    <div align="center">
       <div>whatever you want to align</div>
    </div>

只要确保你对齐中心的任何东西都有相对的css位置，而不是绝对的或其他任何东西......

Answer 5

DEMO

.parent{
    width: 1000px;
   margin: 0 auto;
    list-style: none;
    position:relative;
    text-align: center; 
    vertical-align: middle;
}
.child{
display: inline-block;
    margin: 2px auto;
    width: 25%;
    background-color: green;
}

将儿童DIV对齐到中心

5 个答案: