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高度不一样:

HTML+CSS中因文字换行而引发问题的处理方法_第1张图片

你可能感兴趣的:(HTML/CSS)