Question

我有这个标题，我一直在努力尝试正确对齐它对我来说是一场噩梦。我是一个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紧挨着徽标，它们全部在中间对齐并逐行排列

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中的标题与徽标图像对齐

1 个答案: