1、对vertical-align:middle的一些理解
之前就对vertical-aign的用法一知半解,特别是遇到一些居中对齐的问题是经常用margin,padding等解决,最近在项目中常用到垂直居中,所以有必要回过头来总结。
vertical-aign主要用在文本和与文本相邻元素的垂直方向上的对齐问题,而且是内联元素,也就是inline或者inline-block,
若是元素使用float或者position:absolute时,vertical-align属性也失效。
像这种情况,在div中图片和文字要水平居中对齐,就可以对img是用vertical-align: middle样式(而不是用在文字所在便签!!!也不是包含img的div标签!)
(在chrome中预览框和选择按钮不对齐,ff已经自动对齐)。
当然在表格中图片预览框和选择按钮水平对齐也可用vertical-align: middle样式
2、FF中列表换行问题
列表结果如上,<dd>用了float:left; 当失败序号内容较少的时候列表可以在一行显示完,如下:
当失败序号内容很多的时候列表显示如下,超出了视窗的范围
解决方法:
1、在chrome中直接对<strong>使用word-break:break-all;即可(word-wrap:break-word;无效)
2、而在Firefox中,除了word-break:break-all;还要加上display:inline-table;(或者display:inline-flex; 或者inline-block)
注:如果再chrome中加上display属性序号也会换行显示
注:当<dd>没有使用float:left;时可直接对<strong>使用word-wrap:break-word;即可,chorme、ff中都有效
不积跬步无以至千里