html - 如何将文本垂直对齐到左下页脚的中心

Question

它是由 3 列组成的单行。 我想让“h5 class:footer-small”与div“class: col-1”垂直对齐

我发现使用 display: inline-block 可以使文本在中心垂直对齐。但我不明白这怎么可能？有人可以解释为什么使用 display:inline-block 有效吗？

HTML

<footer>
      <div class="row-4">
        <div class="col-1">
          <p class="col-1">
            <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
          </p>
        </div>
        <div class="col-5">
          <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
        </div>
        <div class="col-6">
          <h2 class="footer-frase">McDreamy</h2>
            <em class="footer-frase">"It's a beautiful night to save lives"</em>
        </div>
      </div>
    </footer>

Answer 1

你可以简单地使用css3 flexbox概念来做到这一点

将以下样式添加到您的 col-1

• 显示:flex;

• align-items:center;

• justify-content:center;

注意:您不能在段落标签( <h1> )内声明标题标签( <h2> 、 <p> 等)，因此将其替换为 <span>标签或任何其他标签

div.row-4{
  display:flex;
  color:#fff;
  }

div.row-4 div{
  padding:5px;
  }
.col-6{
  background:#73819b;
  flex:2;
  }
.col-5{
  background:#438cab;
  flex:2;
  }
.col-1{
  background:#438cab;
  display:flex;
  align-items:center;
  justify-content:center;
  }

<footer>
      <div class="row-4">
        <div class="col-1">
          <span class="col-1">
            <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
          </span>
        </div>
        <div class="col-5">
          <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
        </div>
        <div class="col-6">
          <h2 class="footer-frase">McDreamy</h2>
            <em class="footer-frase">"It's a beautiful night to save lives"</em>
        </div>
      </div>
    </footer>