Правильный CSS для выравнивания нескольких divs

Question

Итак, я пытаюсь создать главный заголовок для нескольких веб-страниц, которые я создаю. В этом заголовке у меня есть изображение, текстовый центр ниже изображения (все слева от моего основного заголовка), основной заголовок, который я хочу сосредоточить на странице, и две ссылки (домой и свяжитесь с нами), которые будут расположенных справа от основного заголовка. Вот мой HTML и CSS до сих пор:

<div class="header"> 
<div class="logoHeader"> 
<img src="6.jpg"> 
<p> My Image Header </p> 
</div> 
<h3> Page Header </h3> 
<a href=""> Home Page </a> 
<a href=""> Contact Us </a> 
</div> 

div.logoHeader { 
width: 125px; 
} 

.logoHeader img { 
margin: auto; 
display: block; 
} 

.logoHeader p { 
margin: auto; 
font-size: 70%; 
text-align: center; 
font-weight: bold; 
} 

Это правильно центрирует текст под изображением, но теперь я не знаю, как выровнять мой заголовок в центре страницы, ссылки на справа от заголовок, а затем, наконец, выравнивание заголовка div в центр. Когда все сказано и сделано, я хочу, чтобы выглядеть следующим образом:

 IMAGE     
    Image   Main Header (centered within middle of img)  2 links 

(текст по центру под изображением)

Все это центрируется в моем окне. Может ли кто-нибудь помочь мне с этим? Любая помощь будет принята с благодарностью.

Answer 1

Существует много способов сделать это, но вот один из способов. Я плавать слева (логотип и название) и правой (ссылки) на противоположных сторонах затем использовать text-align:center и display:inline центрировать заголовок страницы

/* 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'>   
     <a href="">Home Page</a> 
     <a href="">Contact Us</a> 
    </div> 
</div> 

Demo here

---

РЕДАКТИРОВАНИЕ

Если вы хотите, чтобы он был равномерно распределен по вертикали, а также не использовал жестко закодированные прокладки и для этого, вы могли бы изменить настройку, чтобы вместо этого использовать формат таблицы. Вам нужно будет играть с шириной каждого раздела и таким образом, чтобы получить его точно так, как вы этого хотите. Я использую тот же HTML, как описано выше

.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

Для чего-то вроде этого Nav таблица не является плохим решением, но некоторые люди не рекомендуют никогда не использовать таблицы для разметки, так что вы можете также использовать flexbox display:flex; justify-content:space-around вместо этого, если вы хотите