单行的行内元素

 

　　只需要设置单行行内元素的"行高等于盒子的高"即可；

 

　　

 

　　<style>

 

　　#father{

 

　　width:500px;

 

　　height:300px;

 

　　background-color:skyblue;

 

　　}

 

　　#son{

 

　　background-color:green;

 

　　height:300px;

 

　　}

 

　　</style>

 

　　<divid="father">

 

　　<spanid="son">我是单行的行内元素</span>

 

　　</div>

 

　　效果：

 

　　1556519521438598.jpg

 

　　多行的行内元素

 

　　使用给父元素设置display:table-cell;和vertical-align:middle;即可；

 

　　

 

　　<style>

 

　　#father{

 

　　width:500px;

 

　　height:300px;

 

　　background-color:skyblue;

 

　　display:table-cell;

 

　　vertical-align:middle;

 

　　}

 

　　#son{

 

　　background-color:green;

 

　　}

 

　　</style>

 

　　<divid="father">

 

　　<spanid="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>

 

　　</div>






本文转载自中文网