Question

我想知道是否可以将未放入分区的网站标题居中，但是已放在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;
}

我希望标题内的内容以origanal大小为中心，以及在较小的分辨率（即移动设备）中使用网站时。

我该怎么做？

Answer 1

使用display: inline-block代替float: left。

然后元素将是内联的。向标题添加text-align: center会使其居中。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用标题标记集中网站

1 个答案: