Question

我有一个包含文本的div标签，我想将此div的内容垂直居中对齐。

这是我的div风格：

 div {
     height: 200px;
     line-height: 200px;
     text-align: center;
     border: 2px dashed #f69c55;
   }
   span {
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
   }

这是我的HTML

 <div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

我想在下面的图片中发短信： -

i.stack.imgur.com/a5wQe.png

Answer 1

display:table div和display:table-cell span 会做的。

＆＃13;

div {
     

     text-align: center;
     border: 2px dashed #f69c55;
     display:table;
     height:300px;
   }
   span {
     display: table-cell;
     vertical-align: middle;
   
   }

＆＃13;

<div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

＆＃13;

如何将中心文本与CSS对齐？

1 个答案: