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

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