H1, Ul и H2 встроенное позиционирование с CSS

Question

Мне нужно сделать отзывчивый заголовок с меню H1, UL и H2. H1 - около 5% от левого угла. H2 - около 5% с правого угла. И между ними есть меню UL, которое мне нужно разместить в центре. Все в одной строке ... И линия HR под этой строкой. Как разместить меню UL в Центре?

jsFiddle EXAMPLE

HTML:

<div class="container"> 
    <header class="clearfix"> 
      <!-- TITLE 1 --> 
      <h1>Title 1 </h1> 
      <!-- UL --> 
      <ul> 
       <li> menu 1</li> 
       <li> menu 2</li> 
       <li> menu 3</li> 
      </ul> 
      <!-- TITLE 2 --> 
      <h2>Title 2 <br/><span>span</span></h2> 

     <hr /> 
    </header> 
</div> 

CSS:

.container > header { 
    width: 90%; 
    margin: 0 auto; 
    position: relative; 
    padding: 40px 30px 20px 30px; 
} 
.container > header h1 { 
    padding-left: 5px; 
    font-size: 30px; 
    line-height: 37px; 
    margin: 0 auto; 
    font-weight: 700; 
    color: #000; 
    display:inline !important; 
    float: left; 
} 
.container > header h2 { 
    padding-right: 5px; 
    font-size: 14px; 
    line-height: 14px; 
    margin: 0px 0px 0px auto; 
    font-weight: 700; 
    color: #000; 
    display:inline !important; 
    float: right; 
    text-align: right; 
} 
.container > header h2 span { 
    font-size: 10px; 
    line-height: 11px; 
    font-weight: 700; 
    color: #000; 
} 
.container > header ul { 
    font-size: 10px; 
    line-height: 11px; 
    font-weight: 700; 
    color: red; 
} 
.container > header ul li { 
    float: left; 
    list-style-type: none; 
    padding: 0px 5px 0px 5px; 
} 
.container > header hr { 
    border:0; 
    color:#000; 
    background:#000; 
    height:1px; 
    clear: both; 
} 

Answer 1

Вы можете использовать плавали div с и text-align для достижения этой цели. Вот HTML:

<header> 
    <div class="left">Left</div> 
    <div class="center">Center</div> 
    <div class="right">Right</div> 
</header> 

И CSS, чтобы выровнять их должным образом:

.left { float: left; width: 25% } 
.center { float: left; width: 50%; text-align: center; } 
.right { float: left; width: 25%; text-align: right; } 

Here's a jsFiddle demo.