鍍金池/ 問答/HTML/ 怎么水平垂直對齊多行文本?

怎么水平垂直對齊多行文本?

給P標簽加上line-height 一行文本可以對齊,但是多行的話就不行了,這個怎么解決?不要添加額外的標簽,由于兼容IE8,只能用css了

<div class="dv">
  <p>123</p>
  <p>123</p>
  <p>123</p>
</div>

 <style>
    .dv{
        width: 500px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;
    }
    p{
        line-height: 200px; 
    }
</style>
回答
編輯回答
命多硬

樓上正解,本來想寫的···還是自己琢磨吧,原理都說出來了

2018年3月8日 15:38
編輯回答
歆久

轉化為塊狀行內(nèi)元素(display:inline-block),然后使用vertical-align:middle;

2018年8月6日 22:40
編輯回答
玩控

這種東西,網(wǎng)上一查一堆。我覺得等,還不如自己搜索。畢竟是常用的。

張鑫旭-多行文字的水平垂直居中-傳送門

2018年8月14日 06:11
編輯回答
墨小白
.dv {
  width: 500px;
  height: 200px;
  background-color: pink;
  margin: 0 auto;

  display: table-cell;
  vertical-align: middle;
}
p {
  //line-height: 200px;
  
  vertical-align: middle;
}
2017年6月4日 21:07