css - 混合 float 和绝对定位问题

Question

我正在尝试 float 三个元素，没问题。然而，在两个外部盒子中，我需要将一个元素垂直放置在中心，所以我想我会将它们都包装在另一个 div 中， float 包装 div，然后将元素绝对定位在它们内部并将包装元素设置为 position: relative; 这样它就不会弄乱布局并且三个元素会保持正确 float 。

然而它似乎并没有那样发生，中间的元素似乎仍然被一直推到左边。

我的 CSS:

.line_wrap {
    float: left;
    position: relative;
    width: 366px;
    min-width: 366px;
    max-width: 366px;    
}

.line_wrap .line {
    position: absolute;
    top: 25px;
    left: 0;
    width: 366px;
    min-width: 366px;
    max-width: 366px;
    border-top: 1px solid #d9dce6;
}

.title {
    float: left;
}

.title h2 {
    font-weight: 300;
    font-size: 37px;
    color: #425080;
}

我的 HTML:

<div class="fee_header">
    <div class="line_wrap">
        <div class="line"></div>
    </div>
    <div class="title">
        <h2>Standard Fees</h2>
    </div>
    <div class="line_wrap">
        <div class="line"></div>
    </div>
    <div class="contentClear"></div>
</div>

fiddle :http://jsfiddle.net/MN88R/

我试图将这两个元素放在两侧，以便它们的边框最终位于中间文本的垂直中心。

Answer 1

如果我正确理解您要实现的目标，那么我认为您可能只是从错误的 Angular 接近它，也许应该尝试使用 3 个 float 框以外的其他方法。

如果您的目标是让标题居中于它的父容器，然后边框横跨标题文本的垂直中心，我会尝试更像这样的方法:

CSS

.title {
    height:20px;
    overflow:visible;
    border-bottom:1px solid #d9dce6;
    margin-bottom:20px;

}

.title h2 {
    font-weight: 300;
    font-size: 37px;
    color: #425080;
    text-align:center;
}

HTML

       <div class="fee_header">
           <div class="title">
               <h2>Standard Fees</h2>
           </div>
        </div>

这是一个新 fiddle 的链接: http://jsfiddle.net/2KDQ4/1/

只需确保标题的字体大小和容器 div 高度的比例符合您的需要。标题的底部边距设置为您需要的任何间距。