CODEWITHSUNDEEP
htmlcss
Christoph Pader
Christoph Pader

Reputation: 168

HTML/CSS | How to place different elements in a header div to different positions?

For example:

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>

In this case, i want to place the image on the left side of the header, and center the Buttons, and probably add a login button to the right. But i cant do that with text-align.

Upvotes: 2

Views: 82

Answers (1)

Asons
Asons

Reputation: 87201

As I saw you started out with display: table-cell on navMenu I continued with that.

I added 2 wrappers, navLogo and navLogin with display: table-cell and then I added display: table to header.

Now, with text-align, you can make their children left, right or center align.

#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;
}
<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>

Upvotes: 3

Related Questions