Question

我正试图浮动三个元素，没问题。但是在两个外框中我需要在中心垂直放置一个元素，所以我想我会将它们包装在另一个div中，浮动包装div，然后将元素绝对定位在它们内部并将包裹元素设置为{{1所以它不会弄乱布局，三个元素会保持正确浮动。

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

我的CSS：

position: relative;

我的HTML：

.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;
}

小提琴：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高度符合您的需求。标题的下边距设置为您需要的间距。

混合浮动和绝对定位问题

1 个答案: