Proper CSS for aligning multiple divs - html

Question

Okay so I am trying to build a main header for multiple web pages that I am building. In this header, I have an image, text center below the image, (all to the left of my main header), a main header which I want centered in the page, and two links (home, and contact us) which will be placed to the right of the main heading. Here is my HTML and CSS so far:
<div class="header">
<div class="logoHeader">
<img src="6.jpg">
<p> My Image Header </p>
</div>
<h3> Page Header </h3>
Home Page
Contact Us
</div>
div.logoHeader {
width: 125px;
}
.logoHeader img {
margin: auto;
display: block;
}
.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
This correctly centers the text below the image, but now I don't know how to align my header to the center of the page, links to the right of the header, and then finally aligning the header div to center. When all is said and done, I want it to look like this:
IMAGE
Image Main Header (centered within middle of img) 2 links
(text centered under image)
All of this being centered in my window. Can anyone help me out with this? Any help would be greatly appreciated.

Answer 1

There are many ways to do this, but here is one way. I float the left (the logo and name) and right (the links) to opposite sides then use text-align:center and display:inline to center the page header
/* CSS */
.header {
background:grey;
display:inline-block;
width:100%;
text-align: center;
}
.logoHeader {
width: 125px;
float:left;
}
.pageHeader {
display: inline;
margin: 0 auto;
}
.headerLinks {
float:right;
}
.logoHeader img {
margin: auto;
display: block;
}
.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
/* HTML (slightly changed) */
<div class="header">
<div class="logoHeader">
<img src="6.jpg" />
<p>My Image Header</p>
</div>
<h3 class='pageHeader'>Page Header</h3>
<div class='headerLinks'>
Home Page
Contact Us
</div>
</div>
Demo here
EDIT
If you want it evenly spaced vertically as well and not use hard coded paddings and such to do so, you could change the setup to use a table format instead. You'll have to play with the width of each section and such to get it exactly the way you want it. I'm using the same HTML as above
.header {
background:grey;
vertical-align:middle;
width:100%;
padding:15px;
display:table
}
.header * {
display:table-cell;
width:33.3%; /* 100 / number of sections */
vertical-align:middle;
}
.logoHeader img {
margin: 0 auto;
}
.logoHeader p {
display:block;
margin:0 auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
.pageHeader {
text-align:center;
}
.headerLinks {
text-align:center;
}
Demo of tabular approach
For something like this nav a table isn't a poor decision, but some people recommend never using tables for layout, so you could also use flexbox's display:flex; justify-content:space-around instead if you'd like