Question

我想我现在已经疯了，不知道怎么解决它...请帮助你们。

我在页面上有三个div，它们都应该放在一行上。它们必须是方形（带圆角），所以我必须设置宽度和高度以保持1：1的宽高比。我有一个标题，它应该是垂直和水平居中。标题的措辞可能会改变，并且可能超过2行，因此在这种情况下，简单的margin-top是不够的。

第一个问题：尽管没有其他任何影响，但顶部有一些奇怪的边缘（必须有，但我看不清楚）。如果我浮动他们排队的div，但浮动不是要走的路...为什么内联块不起作用？

第二个问题（可能是相关的，所以我一次性发布）就是我无法垂直居中标题div。有什么想法吗？

这是一个用来说明的问题：http://jsfiddle.net/fydC4/

HTML：

<div id="container">
    <div class="nav-left">
    <p id="nav-left-title">In this section&hellip;</p>
        <ul>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
        </ul>
    </div>

    <div id="main">
        <h1>Assignments</h1>
        <p>Click on the titles of the assignments to find out more.</p>
            <div class="box" id="good-designs">
                <h2 class="box"><a href="#">3 good designs</a></h2>
            </div>

            <div class="box" id="temp">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>

            <div class="box" id="temp2">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>
    </div><!--end main-->
</div>
</div><!--end container-->

CSS：

#container {
    max-width: 960px;
    margin: auto;
}
#main {
    display: table-cell;
    width: 73em;
    padding: 1em 2em 2em;
    background-color: white;
}
#nav-left-title {
    padding-bottom: 0.5em;
    margin: 0;
    color: white;
}
.nav-left{
    display: table-cell;
    width: 14em;
    background-color: #87a8b1;
    padding: 1.1em;
    font-size: 1.2em;
}
.nav-left li {
    padding: 0.5em 0;
    border-bottom: 1px solid white;
}
h2.box {
    padding: 15px 0;
    margin: 50% 15px;
    margin: auto;
    text-transform: uppercase;
    text-align: center;
}
div.box {
    padding: 15px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    margin-top: 25px;
    margin-left: 1.5em;
    display:inline-block;
    /* float: left; */
}
#good-designs {
    background-color: green;
}
#temp, #temp2 {
    background-color: yellow;
}

Answer 1

您好，您可以使用两个属性来对齐所有元素

vertical-align:middle;

display:inline-table on div.box and 
display:table-cell on h2.box; (for the texts inside your divs)

检查此代码http://jsfiddle.net/fydC4/16/

Answer 2

这对我有用，用浮动替换内联块。

你也在一些不必要的元素上调用两次边距干得好 jsfiddle.net/fydC4/14

内联块元素的边距奇怪，无法垂直对齐其中的元素

2 个答案: