Выравнивание заголовка в CSS с изображением логотипа

Question

У меня этот заголовок, над которым я работал, пытаясь правильно его выровнять, был для меня кошмаром. Я CSS noob, и вот что я до сих пор не знаю, если я просто не называю правильные теги css или что-то, но я никогда не смогу правильно совместить заголовок/изображение. Может ли кто-нибудь здесь помочь мне в этом?

HTML:

<div class="header"> 
    <img src="css_images/seal2.png"/> 
    <div class="title_print"> 
    <strong>THE BILLS OMAHA COUNTY GOVERNMENT</br> 
    OFFICE OF THINGS AND ACCOUNTANTS</br> 
    </strong> 
    </div> 
    <div class="form_title"> 
     insert form title here 
    </div> 
    <div class="reporting_period"> 
     REPORTING PERIOD: January 1, __________, through December 31, __________ 
    </div> 
    </div> 

CSS:

header { 
     display: block; 
    } 
    header{ 
     text-align: center; 
     top: 0; 
     float:left; 
     padding-left: 40px; 
    } 
    img{ 
     text-align: center; 
     top: 0; 
     float:left; 
     padding-left: 40px; 
    } 
    .form_title{ 
     text-align: center; 
     top: 0; 
     float:left; 
     padding-left: 80px; 
    } 
    .title_print, .reporting_period{ 
     text-align: center; 
     top: 0; 
     float:left; 
    } 

EDIT:

Я в основном это нужно так, чтобы title_print, FORM_TITLE и reporting_period идет прямо рядом с логотипом и Theyre все выровнены по середине и вступают в линейную линию

Answer 1

Вам нужно всего лишь поплавать Изображение слева.

Держите три элемента блока в потоке (не плавайте их), и текст будет выравниваться по центру по мере необходимости.

В зависимости от высоты вашего изображения вам могут потребоваться небольшие корректировки с левыми полями, чтобы предотвратить обтекание текста под изображением в зависимости от того, какой вид вам нужен.

header { 
 
    display: block; /* This is the default, not needed */ 
 
    text-align: center; 
 
    top: 0; 
 
    float: left; 
 
    padding-left: 40px; 
 
} 
 
img { 
 
    text-align: center; 
 
    top: 0; /* Not needed... */ 
 
    float: left; 
 
    padding-left: 40px; 
 
} 
 
.form_title { 
 
    text-align: center; 
 
    padding-left: 80px; /* Do you need this? */ 
 
} 
 
.title_print, .reporting_period { 
 
    text-align: center; 
 
}

<div class="header"> 
 
    <img src="http://placehold.it/100x200" /> 
 
    <div class="title_print"> 
 
    <strong>THE BILLS OMAHA COUNTY GOVERNMENT</br> 
 
    OFFICE OF THINGS AND ACCOUNTANTS</br> 
 
    </strong> 
 
    </div> 
 
    <div class="form_title"> 
 
    insert form title here 
 
    </div> 
 
    <div class="reporting_period"> 
 
    REPORTING PERIOD: January 1, __________, through December 31, __________ 
 
    </div> 
 
</div>