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>，并使用{ {1}}用于排序您的布局。无论如何，这是您想要做的更简单的版本：jsfiddle

更新：

抱歉，我正在工作，所以我很快就试图给出一个答案而不用花太多时间来解释它......这可能没有用。无论如何，这是关于我所做的事情的信息。

基本上你采用外部div并为其分配一类菜单。给我们的父div或我们的菜单中的菜单一个高度和宽度。然后将每个链接放在它自己的div中。这些将是儿童部门。

孩子的css给他们一定百分比的父母宽度和100％它的身高。确保将显示内联块设置为一行，而不是堆叠在一起。好到目前为止我认为从css代码中可以很容易地掌握一切，但这里有一个棘手的部分：

为了使链接垂直对齐，你将它们向下移动父母身高的50％......因此最高：50％。然后你需要调整自己的身高。您可以使用transform：translateY（-50％）;它将元素向上移动50％的高度。这是一个非常简短的内容，您可以在我最初阅读此主题的文章中阅读更多内容：Vertically Center Elements

这是代码：

HTML：

<div></div> <span></span>, etc

的CSS：

<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>

Answer 4

不要在标签中给出高度和一些属性，只能为这些值提供li。请参考：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

css菜单文本对齐

4 个答案: