0


我正在尝试做的应该是这样的：
水平/垂直对齐的内部 div
...但是我的inner_topdiv（带有红色背景）不是 水平居中的，最终看起来像这样：
都顶起来了！

冲突似乎display: inline-block'在inner_topdiv 上使用，这就是出现的情况使它垂直居中，除了两个 div 之间的奇怪间距。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS sucks!!!
        </title>

        <style type = "text/css">

            #outer {
                width: 250px;
                height: 500px;
                border: 5px solid black;

                /* for vertically-centering inner divs: */
                display: table-cell;
                vertical-align: middle;
            }
                    #inner_top {
                        width: 75px;
                        height: 175px;
                        background-color: red;

                        /* horizontally-centered: */
                        margin: 0 auto;

                        /* vertically-center both this and the bottom div:
                        (but now horizontal-alignment doesn't work on this div!) */
                        display: inline-block;

                    }
                    #inner_bottom {
                        width: 150px;
                        height: 150px;
                        background-color: blue;

                        /* horizontally-centered: */
                        margin: 0 auto;
                    }
        </style>
    </head>
    <body>
        <div id = "outer">

            <div id = "inner_top">
            </div> <!-- end of inner top -->

            <div id = "inner_bottom">
            </div> <!-- end of inner_bottom -->
        </div> <!-- end of outer div -->
    </body>
</html>
4

3 回答 3

2

我将您的代码放在一个 jsfiddle 中，当我display:inline-block从顶部 div 的样式中删除它时它可以工作。
见http://jsfiddle.net/MrLister/5ZHdK/

/*display: inline-block;*/

仍然不确定你的评论“垂直居中这个和底部的div”来自哪里；听起来如果没有内联块，你就无法让它工作？

于 2013-06-12T20:11:40.363 回答
1

只需使用这个简单的 css 块将它们居中

#inner_top {
  margin-left: auto;
  margin-right: auto;
}
#inner_bottom {
  margin-left: auto;
  margin-right: auto;
}
于 2013-06-12T19:54:28.400 回答
0

您需要使用margin:0 auto所有要居中的子元素。

margin:0 auto不能是块类型的孩子。

http://jsfiddle.net/EDpgS/

于 2013-06-12T19:36:59.803 回答