html - 我试图将文本居中放置在我的页面 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;
}