文本在DIV内不垂直对齐

Question

我无法解释为什么浏览器不允许我在DIV上设置margin-top或padding-top以允许我将文本居中。

HTML -

<div id="header">           
    <div id="Nav">
        <div id="navright">
            <a href="#">Home</a>
            <a href="#">About Us</a>
                <a href="#">Contact Us</a>
            <a href="#">Find Us</a>
        </div>
    </div>
</div>

CSS -

#nav {
    width: auto;
    position: relative;
}

#nav a {
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    font-family: "Arial";
    font-size: 14pt;
    color: #ffffff;
    position: relative;
    margin-top: 10px;
}

结果 -

我出错的任何想法？感谢

Answer 1

您正在编写Nav nog nav

Html代码应为：

<div id="nav">不是<div id="Nav">

这就是为什么你的css不适用于div

对line-height

使用a

#nav a {
  line-height: (pixel height of the li or nav);
}

在此工作JsFiddle

Answer 2

尝试在链接中添加display:inline-block;

#nav a { 
    ...
    display:inline-block;
}

并将<div id="Nav">重命名为<div id="nav">

Answer 3

将display: inline-block;添加到您的标记

demo

并且明显纠正你的错字导航到导航。

Answer 4

#nav a {
    text-decoration: none;
    font-family: "Arial";
    font-size: 14pt;
    color: #ffffff;
    position: relative;
    height:25px;
    line-height:25px;
    margin:5px;
    display:inline-block;
}

Answer 5

如果您希望显示margin-top，则必须为display: inline-block元素声明<a>，正如某人已经指出的那样。但是，如果您希望文本垂直居中，则还可以使用line-height: 50px;之类的内容 这是a fiddle to play with 当然，您应该纠正几个用户提到的CSS选择器或HTML id属性的拼写错误。

Answer 6

添加

display:inline-block 

#nav a

中的

Answer 7

只需添加line-height与导航<div>

的高度相同

并纠正拼写错误。

例如：

#nav {height:20px; float:left;}
#nav a {line-height:20px;}