css菜单文本对齐

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。

这将让你轻松地设置的锚来middle的vertical-align属性：

Updated Fiddle

虽然是改了一下你的视觉风格，并且可能需要一些调整...

编辑

要保持填充，请将其设置在容器上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

好的我认为这是一个更简单的解决方案。我希望你不要介意我没有使用与你一样的html布局，但它做同样的事情。除此之外，你应该只使用无序列表<ul></ul>确切地说，并且使用<div></div> <span></span>, etc来订购布局。无论如何，这里有一个你想要做什么简单的版本：jsfiddle

更新时间：

对不起，我在工作，所以我很快就试图给不占用太多时间来解释它的答案..这可能没有帮助。无论如何，这里是我所做的信息。

基本上，你采取外部股利分配一类菜单。给父母的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>