Question

好吧，所以我试图在html / css中创建一行不同的文本位。这将是导航栏的前身。我的HTML是：

<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>

和CSS：

.navBartext{
  text-align: center;
  color:black;
  font-size: 20;
  font-family: 'Poiret One', cursive;
  display: inline;
  padding-right: 20px;


}
 #navbar{
  width: 100%;
  height: 50px;


 }

现在，当我选择“display：inline;”在代码之外，文本垂直对齐而不是水平对齐，然后我可以使用文本对齐来定位它，但我希望它们都在一行中。当我使用display-inline时虽然它似乎完全绕过了text-align函数（因为这里放的任何东西都会被忽略）。有什么我想念的吗？也许我对显示功能还不够了解。

Answer 1

如果要水平对齐单词，则必须使用display:inline-block;，以便将元素视为文本。始终对子元素使用inline-block，为父元素使用text-align:center;。

p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;


}
#navbar{
width: 100%;
height: 50px;
text-align:center;


}

VIEW DEMO

Answer 2

试试这个，你可以使用<ul>元素代替div，如果你需要包装navBar，div更好作为包装：

[http://jsfiddle.net/WT7qv][1]

http://jsfiddle.net/WT7qv

为什么显示功能会干扰文本对齐？

2 个答案: