-1

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

我的代码不起作用。

谁能解释为什么？

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

4 回答 4

2

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

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

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

如果你想使用vertical-align，你需要display: table在容器上设置（#navigationbar）和display: table-cell你的#logo那个有vertical-align: middle。这将达到相同的效果。

于 2013-10-02T12:35:51.477 回答
1

你可以使用 line-height:33px; ，但我也建议将您的 'a tag' 包装到 'div tag' 中，这样以后操作起来很容易。例子：

<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 上使用绝对值就很容易了。

于 2013-10-02T13:13:42.820 回答
1

将此添加到您当前的 CSS（此处为演示）：

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

#logo {
    display: table-cell;
}

就像@Ennui说的：

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

于 2013-10-02T12:41:08.437 回答
1

您需要在容器上设置垂直对齐的行高，以了解垂直中间的位置。见JSBIN 演示

#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;
}
于 2013-10-02T12:35:11.723 回答