Смешивание вопросов с плавающим и абсолютным позиционированием

Question

Я пытаюсь поплавать тремя элементами, без проблем. Однако в двух внешних ящиках мне нужно позиционировать элемент по вертикали в центре, поэтому я подумал, что я оберну их обоих в другой 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> 

Fiddle: 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 находятся в пропорциях, соответствующих вашим потребностям. И нижний край на заголовке задается тем, что вам нужно.