使用 header 标签将网站居中

Question

我想知道是否可以将未放入分区但已放入 header 标签的网站 header 居中。

它的代码是这样的：

 <header>
    <div class="top">
    </div>
    <div class="image">
    </div>
    </header>

CSS 是这样的：

header
{
width: 100%;
margin: 0 auto;
}

.top
{
width: 30%;
background: yellow;
float:left;
padding: 2.5%
}

.image
{
width: 45%;
background: black;
float: left;
}

我希望 header 中的内容以原始大小居中，以及当网站以较小的分辨率（即移动设备）使用时也是如此。

我该怎么做？

Answer 1

使用 display: inline-block 而不是 float: left。

然后元素将是内联的。在页眉中添加 text-align: center 将使它们居中。

header {
  width: 100%;
  text-align: center;
}
.top, .image {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}
.top {
  width: 30%;
  background: yellow;
  padding: 2.5%
}
.image {
  width: 45%;
  background: black;
}

<header>
  <div class="top">t</div>
  <div class="image">i</div>
</header>

使用 header 标签将网站居中

centering website using header tag

html

css

alignment