Question

文本应该位于导航栏的中间（垂直）。

我的代码无效。

任何人都可以解释原因吗？

<style>
#navigationbar { 
background: rgb(252,219,121);
background: -moz-linear-gradient(top,  rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -o-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -ms-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: linear-gradient(to bottom,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
}

#logo {
color:white;
vertical-align:middle;
margin-left:10px;
}

* { 
margin:0px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">

<div id='navigationbar'>
    <a id='logo' href='http://localhost/'>WORK.</a>
</div>

Answer 1

vertical-align仅适用于具有特定属性的元素，通常使用CSS表display属性（table-cell，table，table-row等等。

然而，当您知道容器的高度时，有一种简单的方法可以垂直居中。只需将line-height: 40px添加到#logo CSS（您也可以将其添加到容器中，在这种情况下没有任何区别）。

#logo {
    color:white;
    line-height: 40px;
    margin-left:10px;
}

如果您想使用vertical-align，则需要在容器（display: table）和#navigationbar上设置display: table-cell到#logo vertical-align: middle {1}}。这将达到同样的效果。

Answer 2

您需要在容器上设置垂直对齐的线高，以了解垂直对齐的内容。见JSBIN demo

#navigationbar { 
background: rgb(252,219,121);
background: -moz-linear-gradient(top,  rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -o-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -ms-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: linear-gradient(to bottom,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
  line-height:40px;
}

Answer 3

将此添加到您当前的CSS（demo here）：

#navigationbar {
    width: 100%;
    display: table;
}

#logo {
    display: table-cell;
}

赞@ Ennui说：

vertical-align仅适用于具有特定属性的元素，通常使用CSS表格显示属性（table-cell，table，table-row等等。

Answer 4

你可以使用line-height：33px; ，但我还建议将'a tag'包装成'div标签'，以便以后操作它很容易。例如：

<style>
#logo {
width: 30px;
height: 40px;   
    margin-left: 10px;
}
#logo a{
color: white;
line-height: 33px;
}
</style>
<body>
<div id='navigationbar'>
    <div id='logo'><a href='http://localhost/'>WORK.</a></div>
</div>
</body>

如果您需要稍后移动该徽标，可以很容易地在#logo上使用绝对值。

vertical-align：中间不工作

4 个答案: