混合浮动和绝对定位问题

Question

我正在尝试浮动三个元素，那里没有问题。但是在两个外部框中，我需要将一个元素垂直放置在中心，所以我想我会将它们都包装在另一个 div 中，浮动包装 div，然后将元素绝对定位在其中并将包装元素设置为 position: relative;所以它不会弄乱布局，三个元素会保持正确浮动。

但似乎并非如此，中间的元素似乎仍然被推到了左边。

我的 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>

小提琴：http://jsfiddle.net/MN88R/

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

Answer 1

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

如果您的目标是将标题中心放在其父容器上，然后边框穿过标题文本的垂直中心，我会尝试更多类似的方法：

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>

这是一个新小提琴的链接： http://jsfiddle.net/2KDQ4/1/

只需确保标题的字体大小和容器 div 的高度符合您的需求。并且标题的下边距设置为您需要的任何间距。