2

我想我现在要疯了，不知道如何解决它......请帮助大家。

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

第一个问题：尽管没有其他任何影响，但顶部有奇怪的边距（肯定有，但我看不出是什么）。如果我浮动它们排列的 div，但浮动不是要走的路，是不是……为什么 inline-block 不起作用？

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

这是一个 jsfiddle 来说明：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;
}
4

2 回答 2

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/

于 2013-10-21T21:32:07.810 回答
0

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

你还在一些不必要的元素上调用了两次边距，你去 jsfiddle.net/fydC4/14

于 2013-10-21T21:35:11.533 回答