1

我无法弄清楚为什么浏览器不允许我在 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;
}

结果 -

DIV 中未对齐文本的屏幕截图

有什么想法我哪里出错了吗？谢谢

4

7 回答 7

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

于 2013-09-23T11:00:05.003 回答
1

尝试添加display:inline-block;你的链接

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

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

于 2013-09-23T11:03:08.640 回答
0

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

演示

并且显然将您的拼写错误 Nav 更正为 nav。

于 2013-09-23T11:00:57.737 回答
0 
#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;
}
于 2013-09-23T11:04:28.773 回答
0

正如有人已经指出的那样，如果您希望margin-top出现，则必须display: inline-block为元素声明。<a>但是，如果您希望文本垂直居中，您也可以使用类似line-height: 50px;.
这是一个可以玩的小提琴。您当然应该更正一些用户提到的
CSS 选择器或 HTML 属性的拼写错误。id

于 2013-09-23T11:06:30.893 回答
0

添加

display:inline-block

在#nav a

于 2013-09-23T11:18:22.120 回答
0

只需添加line-height与导航高度相同的内容<div>

并纠正拼写错误。

例如：

#nav {height:20px; float:left;}
#nav a {line-height:20px;}
于 2013-09-23T11:53:15.847 回答