将 CSS 中的 header 与徽标图片对齐

Question

我有这个 header，我一直在努力尝试正确对齐它，这对我来说是一场噩梦。我是一个 CSS 菜鸟，这是我目前所知道的，我不知道我是否只是没有调用正确的 css 标签或其他东西，但我永远无法得到 header/image正确对齐。这里有人可以帮我吗？

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 就在徽标旁边，它们都在中间对齐并逐行排列

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>

将 CSS 中的 header 与徽标图片对齐

Aligning header in CSS with logo image

html

css

header