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>