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。

这将允许您轻松地将锚点的vertical-align 属性设置为middle：

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 或在我们的例子中的菜单，高度和宽度。然后将每个链接放在它自己的 div 中。这些将是儿童部门。

孩子的 css 给他们父母宽度的百分比和高度的 100%。确保显示 inline-block 使它们排成一行，而不是堆叠在一起。好的，到目前为止，我认为从 css 代码中可以很容易地掌握所有内容，但这是棘手的部分：

为了使链接垂直对齐，您将它们向下移动其父级高度的 50%...因此顶部：50%。然后你需要根据自己的身高进行调整。您可以使用转换来做到这一点： 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
{
	font-size:10px;
	list-style:none;
	margin-left:-40px;
}
.miul li a
{
	text-decoration:none;
}

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

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

#mimenu  a
{
	color:white;
	text-decoration:none;
	padding: 25px 18px;
	display:block;
	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);
}
*/
/*Menu */
#mimenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	
}

#mimenu ul li {
    float: left;
	color:white;
	font-size:14px;
  display:table;
  height: 70px;
	 background-color: #3D2F2F;
   margin-right:10px;
	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);
}

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

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

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

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

#top_menu a:active {
    text-decoration: none;
	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>