vertical-align:middle居中，Firefox中换行问题

 

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中都有效

 

 

 

 

不积跬步无以至千里