2014-12-22 3 views
0

Я пишу меню с многострочным. Я использовал контейнер div и плавающие divs. Вот код: click for code on jsfiddle.net или посмотреть здесь код:CSS как выровнять вертикально центральные div плавающие элементы меню?

<html> 
<head> 
    <style> 
     #menu { 
      width: 1000px; 
      height: 55px; 
      border: 1px solid green; 
      background-color: green; 
     } 

     .element_menu { 
      width: 100px; 
      border: 1px solid red; 
      float: left; 
      text-align: center; 
     } 

     a { 
      text-decoration: none; 
      color: white; 
      font-size: 11pt; 
     } 
    </style> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <div id="menu"> 
     <div class="element_menu"><a href="#">Strona<br />Główna</a></div> 
     <div class="element_menu"><a href="#">Kontakt</a></div> 
     <div class="element_menu"><a href="#">Tygodniowy plan<br />pracy</a></div> 
    </div> 
</body> 

Я хочу, чтобы выровнять текст меню по центру вертикально. Как это сделать?

EDIT: Границы .element_menu предназначены для тестирования.

+1

http://jsfiddle.net/42w0wde9/2/ Вы хотите это сделать? – Sai

ответ

1

Добавить дисплей: настольный ячейки и вертикального выравнивания: середина к классу element_menu и снимите поплавок: левый

фрагмент кода здесь ...

#menu { 
 
    width: 1000px; 
 
    height: 55px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
} 
 
.element_menu { 
 
    width: 100px; 
 
    border: 1px solid red; 
 
    /*float: left;*/ 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 11pt; 
 
}
<div id="menu"> 
 
    <div class="element_menu"><a href="#">Strona<br />Główna</a> 
 
    </div> 
 
    <div class="element_menu"><a href="#">Kontakt</a> 
 
    </div> 
 
    <div class="element_menu"><a href="#">Tygodniowy plan<br />pracy</a> 
 
    </div> 
 
</div>

Надежда это то, что вы искали.

Смежные вопросы