0

这是HTML代码：

    <div id="homepage_boxes_holder">
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
    </div>

这是CSS：

.homepage_boxes{
    width: 300px;
    height: 200px;
    float: left;
    margin-top: 100px;
    margin-right: 80px;
    margin-left: 150px;
    line-height: 10;
}

.box_heading{
    text-align:center;
    font-family: BebasNeue;
    font-size: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid black;
}

出于某种原因，h3 在 div 中占用了大量空间（看起来填充对我来说很大，但因为我已将其设置为 0，所以这不可能）。.box_heading出于演示目的，我已经设置了边界。图片在这里：

图片链接：http: //imgur.com/vDs1KYs
-蓝色为div边框，黑色为H3边框。

编辑：如果可能的话，我还希望标题以 div 为中心，而不是超出边界。

4

4 回答 4

1

那是因为您line-height: 10;在父元素中添加了 a，这会将每行的高度增加10 倍。

只需删除它就可以了。

工作小提琴

更新

要将元素保持在h3其父元素的中间，您可以将 a 设置为该元素line-height的父height元素（在这种情况下，您可以将此 CSS 声明应用于父元素和h3元素）。

.homepage_boxes {
    /* ... */
    line-height: 200px;  /* as the same of the parent's height */
}

更新的小提琴

另一种选择是将父padding元素的顶部和底部设置为相同而不设置固定，这使得子元素位于中间。height

JSFiddle 演示

于 2014-01-24T08:32:33.160 回答
0

只需添加 line-height: 1em; 到 .box-heading 类描述。line-height 属性会改变字体的“上升”或“上升高度”，使其如此之高。

于 2014-01-24T08:31:38.267 回答
0

只需将其添加到 h3 中：

line-height: 1em;

http://jsfiddle.net/B7ZTw/

要以两种方式居中文本，请将以下内容添加到 h3：

position: relative;
top: 50%;
margin-top: -0.5em;

您在这里所做的是：将 h3 设置为距离顶部（即中间）的 50%，然后减去元素高度的一半，这样它就不会从 50% 开始而是居中。

见这里：http: //jsfiddle.net/B7ZTw/2/

于 2014-01-24T08:24:29.327 回答
-1

如果可能的话，您可以放置​​静态高度

于 2014-01-24T08:23:46.800 回答