css menu text align

Question

Мне нужно выровнять текст в центре в этом меню, но я не смог.

#mimenu a { 
    display: inline-block; 
    width: 130px; 
    height: 50px; 
    background-color: #3D2F2F; 
    text-align:center; 
    color:white; 
    margin-top:20px; 
    background-color:#3d2f2f; 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
    vertical-align:top; 
    padding-top:10%; 
    margin-right:10px; 
} 

http://jsfiddle.net/79epfyut/

Answer 1

Вы можете сделать свой, содержащий li в display: table элемент, а якорь display: table-cell.

Это позволит вам легко установить vertical-align свойство анкера к middle:

Updated Fiddle

Хотя это немного изменился ваш визуальный стиль, и может потребовать некоторых ... Цвет регулируется

EDIT

Чтобы сохранить прокладку, установите ее на контейнер li: Fiddle with padding

Answer 2

Взгляните на другой подход, который я пробовал.

Я использую следующие свойства CSS:

display: table; /*for main div*/ 

display: table-row; /*for ul */ 

display: table-cell; /*for li */ 

Чтобы сделать это намного ясно: Fiddle here !

Надеется, что это помогает.

Answer 3

OK Я думаю, что это намного проще. Надеюсь, вы не против, что я не использовал тот же html-макет, который вы сделали ... но он делает то же самое. Кроме того, вы должны использовать только неупорядоченные списки <ul></ul> для этого, и используйте <div></div> <span></span>, etc для заказа ваших макетов , Во всяком случае, здесь более простой вариант того, что вы хотите сделать: jsfiddle

Обновлено:

К сожалению, я на работе, так что я быстро пытался дать ответ, не занимая слишком много времени, чтобы объяснить это .. . Вероятно, это не полезно. В любом случае, вот информация о том, что я сделал.

В основном вы берете внешний div и назначаете ему класс меню. Дайте родительскому div или меню в нашем случае высоту и ширину. Затем поместите каждую ссылку в свой собственный div. Это будут детские подразделения.

Css для детей дает им процент от ширины родителя и 100% его высоты. Обязательно создайте встроенный блок отображения, чтобы они были в строке и не складывались друг на друга. ОК до сих пор я думаю, что все довольно легко понять из кода css, но вот сложная часть:

Чтобы получить выравнивание по вертикали, вы сдвинете их на 50% от высоты своего родителя. .. сверху: 50%. Затем вам нужно отрегулировать свою высоту. Вы можете сделать это, используя transform: translateY (-50%); который перемещает элемент вверх на 50% от собственной высоты.Это очень короткий, и вы можете прочитать больше из статьи, которую я сначала прочитал на эту тему здесь: Vertically Center Elements

А вот код:

HTML:

<div id="menu"> 
<div class="child"> 
    <a href="/joomla31/">Somos</a> 
</div> 
<div class="child"> 
    <a href="/joomla31/index.php/segunda-pagina">Segunda Página</a> 
</div> 
<div class="child"> 
    <a href="#">Este es un texto largo para el menú</a> 
</div>  
</div> 

CSS:

#menu{ 
width: 100%; 
height: 100px; 
display: block; 
} 
.child{ 
margin: 1%; 
background-color:#3d2f2f; 
width: 30%; 
height: 100%; 
text-align: center; 
display: inline-block; 
} 
a{ 
background: #ffdb4c; 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
} 

Answer 4

Не указывайте высоту и некоторое свойство в теге, вы можете дать li только для этих значений. Пожалуйста, обратитесь:

.miul 
 
{ 
 
\t font-size:10px; 
 
\t list-style:none; 
 
\t margin-left:-40px; 
 
} 
 
.miul li a 
 
{ 
 
\t text-decoration:none; 
 
} 
 

 
#sect_01 
 
{ 
 
\t width:100%; 
 
\t display:block; 
 
} 
 
/* 
 
#mimenu ul 
 
{ 
 
\t list-style:none; 
 
} 
 

 
#mimenu li 
 
{ 
 
\t display:inline-block; 
 
\t color:white; 
 
\t font-size:14px; 
 
\t margin-right:10px 
 
} 
 

 
#mimenu a 
 
{ 
 
\t color:white; 
 
\t text-decoration:none; 
 
\t padding: 25px 18px; 
 
\t display:block; 
 
\t background-color:#3d2f2f; 
 
\t -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
\t box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
} 
 
*/ 
 
/*Menu */ 
 
#mimenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
\t 
 
} 
 

 
#mimenu ul li { 
 
    float: left; 
 
\t color:white; 
 
\t font-size:14px; 
 
    display:table; 
 
    height: 70px; 
 
\t background-color: #3D2F2F; 
 
    margin-right:10px; 
 
\t margin-top:20px; 
 
    background-color:#3d2f2f; 
 
\t -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
\t box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); 
 
} 
 

 
#mimenu a { 
 
    display: block; 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
    width: 130px; \t 
 
\t text-align:center; 
 
\t color:white; \t 
 
\t 
 
\t 
 
} 
 

 
#top_menu a:link { 
 
    text-decoration: none; 
 
\t color:white; 
 
} 
 

 
#top_menu a:visited { 
 
    text-decoration: none; 
 
\t color:white; 
 
} 
 

 
#top_menu a:hover { 
 
    text-decoration: none; 
 
\t color:white; 
 
} 
 

 
#top_menu a:active { 
 
    text-decoration: none; 
 
\t color:white; 
 
}

<div style="width:960px;display:block;" id="mimenu"> 
 
<ul class="nav menu miul"> 
 
<li class="item-101 current active"> 
 
<a href="/joomla31/">Somos</a> 
 
</li> 
 
<li class="item-103"> 
 
<a href="/joomla31/index.php/segunda-pagina">Segunda Página</a> 
 
</li> 
 
<li class="item-104"> 
 
<a href="#">Este es un texto largo para el menú</a> 
 
</li> 
 
</ul> 
 

 
</div>