我正在尝试将文本放在页面HTML中间

Question

我有三个不同的div标签(不在彼此内部)和代码,因此它有一个放置左,中或右的单词,但中心非常偏离中心.这是HTML代码:

.desc {
  float: right;
  color: skyblue;
}

.desc1 {
  float: left;
  color: skyblue;
}

.desc2 {
  text-align: center;
  color: skyblue;
}

<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>

Answer 1

您可以使用flexbox来修复它,

HTML:

<div class="container">
  <div class="desc1">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc2">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>
</div>

CSS:

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}