Question

它是由3列组成的单行。我想制作＆＃34; h5课程：footer-small＆＃34;垂直对齐div＆＃34;类：col-1＆＃34;

我发现使用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

显示：弯曲;
对齐项：中心;
证明含量：中心;

注意：您无法在段落标记（<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>

Answer 2

你有两个要这样做：

1-设置行高。

2-或设置高度本身。

＆＃13;

.row-4 {
  
  background-color: lightblue;
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
   vertical-align: middle;
}

h2, em
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

em {
  font-size: 12px;
  font-weight: normal;
  display: block;
  margin-top: 10px;
 }

＆＃13;

<footer>
  <div class="row-4">   
    <h2 class="footer-frase">
      McDreamy
      <em class="footer-frase">"It's a beautiful night to save lives"</em>
    </h2>    
  </div>
</footer>

＆＃13;

BTW：我做了一些修改。

还有另一种方法，即使用弹性容器。

如何将文本垂直对齐左下角的中心

2 个答案: