css: проблема выравнивания с изображением и заголовком

Question

У меня возникают проблемы с выравниванием изображения с заголовком внутри меню навигации. В идеале все должно быть выровнено внизу. Я создал jsfiddle воспроизвести проблему:

http://jsfiddle.net/graphicsxp/j2t9R/

 <nav style="float: left"> 
      <ul class="menu"> 
       <li> 
        <a href="index.html" class="logo"> 
         <img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a> 
       </li> 
       <li> 
        <h4 >Sam</h4> 
       </li> 
      </ul> 
      <div class="clear"></div> 

     </nav> 
     <nav> 
      <ul class="menu"> 
       <li class="current-menu-parent"><a href="javascript:void(0)">ACCUEIL</a> 

       </li> 
       <li><a href="javascript:void(0)">PAGES</a> 

       </li>     
      </ul> 
      <!-- .menu --> 
      <div class="clear"></div> 
     </nav> 
    </div> 
</header> 

как:

быть:

Answer 1

Я решил проблему с помощью кода, и честно говоря, я не могу вам сказать, что я изменился, потому что есть способ много коды происходит для такой простой задачи , Here it is anyway

Я также взял на себя смелость сделать новый один, показывая, как простой код could look

Простой, чистый, легко читать. Все сделано с одним <div> и неупорядоченным списком.

Упрощение вашего кода и упрощение его чтения должно быть главной целью кодирования, несмотря ни на что, но также помогает пользователям быстрее отвечать на ваши вопросы, помогать и лучше помогать вам в вопросах, которые у вас есть.

Answer 2

Temp затруднительное может быть:

надстройкой CSS для элемента h4 .... лучше дать идентификатор, а затем добавить.

Я видел вашу скрипку, пожалуйста, поместите ниже кода в CSS

h4{ 
    margin-top:150px; 
} 

или

(Give идентификатор = hompageheaderUserName на h4 Сэму)

h4#hompageheaderUserName 
{ 
    margin-top:150px; 
} 

Изменение ширины а/c к вашим потребностям.

Скриншота из скрипки: