HTML+CSS中因文字换行而引发问题的处理方法

1.当我们需要让一段内容的行内垂直居中，如果文字比较短，直接设置 heigth=x 然后将 line-height设置成相同的x即可。

但是一旦文字过长而变成多行，该方法就不适用了而且会造成样式错乱（背景色只有第一行文字有，第二行文字完全跳出区域样式外等问题）

给p标签或文字所在标签设置：

display: table-cell;

vertical-align: middle;

如果设置完以上两个属性发现文字在p标签中垂直居中了,但是却跑到了最左边, 则给p标签价格 width = "1%" 的宽度即可水平居中,不知道为什么!!!

如果不起作用需要将其父div设置 display: table; 属性。

display: table-cell  ----  的作用是，即使我不是个单元格我也要强行使用单元格的属性！！！

 

2. 使用bootstrap等栅格布局时候, 比如每一行排列若干张图片,图片正下方是一段文字。

这时如果图片下方的文字行数不一致，则进行流式布局时有可能某一行图片被挤到最右边，而左边空白。

这里也可能使用 table-cell等相关属性进行解决.。

如下图,因为换行导致每一个div高度不一样:

• « 上一篇：自学java教程 YES黑客联盟Java基础开发课程
• » 下一篇：阿里前大数据架构师：如何快速的成长为一名优秀大数据架构师