页面布局中,经常会使用到文字居中、图片居中的效果,虽然很简单,但对一些初学者或者样式布局比较薄弱的开发人员来说,还是比较困难的,这里讲讲display: table 和 display: table-cell怎样使图片和文字居中吧。
1、图片居中:
html代码:
<div class="img-wrap"> <img class="img-content" src="../assets/img/home/advantage.png" alt=""> <div class="title">高效办公</div> <div class="content"> <p>移动端与PC端联动,随时随地</p> <p>办公;及时了解货物中转状态,</p> <p>清晰的财务报表,让办公更高效</p> </div> </div>
css代码:
.img-content { display: table-cell; //变成块级表格元素 vertical-align: middle; margin: 0 auto; }
这样图片就能居中啦!
2、文字居中
如何让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中的。
html代码:
<div class="p"> <p class="s"> 轻轻的我走了,正如我轻轻地来,我轻轻的招手,不带走一片云彩。 轻轻的我走了,正如我轻轻地来,我轻轻的招手,不带走一片云彩。 轻轻的我走了,正轻轻的我走了,正如我轻轻地来,我轻轻的招手, 不带走一片云彩。 </p> </div>
css代码:
<style> .p { display: table; width: 500px; height: 500px; text-align: center; } .s { display: table-cell; height: 300px; line-height: 30px; background-color: blueviolet; vertical-align: middle; color: #fff; } </style>