HTML / CSS |如何将标题div中的不同元素放置到不同的位置？

Question

例如：

HTML：

#header {
background-color: #2A2A2A;
height: 70px;
margin: 0;
text-align: center;
vertical-align: middle;
font-family: "Janda Everyday";
}
#headerLogo {
display: table-cell;
vertical-align: middle;
margin: 0;
position: absolute;
}
#header > #navMenu {
overflow: hidden;
display: inline-block;
margin: 0px 10px 0px 10px;
}
#header > #navMenu > ul {
padding: 0;
}
#navMenu > ul > li {
display: inline;
}
#navMenu > ul > li > a {
color: white;
font-size: 15px;
text-decoration: none;
padding: 23px 10px 23px 10px;
}

<div id="header">
 <img src="images/headerLogo.png" style="width: 250px; height: 50px;" />
 <div id="navMenu">
   <ul>
     <li><a href="1.html">1</a></li>
     <li><a href="2.html">2</a></li>
     <li><a href="3.html">3</a></li>
   </ul>
 </div>
</div>

在这种情况下，我想将图像放在标题的左侧，并将按钮居中，并可能在右侧添加一个登录按钮。但我不能用text-align做到这一点。

Answer 1

当我看到你display: table-cell开始navMenu时，我继续说道。

我添加了2个包装器，navLogo和navLogin display: table-cell，然后我将display: table添加到header。

现在，使用text-align，您可以让他们的孩子left，right或center对齐。

＆＃13;

＆＃13;

#header {
  background-color: #2A2A2A;
  height: 70px;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  font-family: "Janda Everyday";
  display: table;
  width: 100%;
}
#header #navLogo {
  display: table-cell;
  text-align: left;
  width: 33%;
}
#header > #navMenu {
  display: table-cell;
  text-align: center;
  width: 33%;
}
#header > #navLogin {
  display: table-cell;
  text-align: right;
  width: 33%;
  color: white;
}


#header > #navMenu > ul {
  padding: 0;
}
#navMenu > ul > li {
  display: inline;
}
#navMenu > ul > li > a {
  color: white;
  font-size: 15px;
  text-decoration: none;
  padding: 23px 10px 23px 10px;
}

＆＃13;

<div id="header">
 <div id="navLogo">
   <img src="images/headerLogo.png" style="width: 250px; height: 50px;" />
 </div>
 <div id="navMenu">
   <ul>
     <li><a href="1.html">1</a></li>
     <li><a href="2.html">2</a></li>
     <li><a href="3.html">3</a></li>
   </ul>
 </div>
 <div id="navLogin">
   Button
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;