html - 将 CSS 中的标题与 Logo 图像对齐

Question

我一直在努力尝试正确对齐这个 header ，这对我来说是一场噩梦。我是一个 CSS 菜鸟，这是我目前所拥有的，我不知道我是否只是没有调用正确的 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;
   }

编辑:

我基本上需要它，以便 title_print、form_title 和 reporting_period 紧挨着 Logo ，它们都在中间对齐并逐行显示

Answer 1

只需要将图片向左浮动即可。

保持流中的三个 block 元素(不要 float 它们)和文本 将根据需要与中心对齐。

根据图像的高度，您可能需要进行一些小的调整 到左边距，以防止文本根据您需要的外观在图像下方换行。

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>