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

2018-06-24 01:00:25来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

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

 

 

 

 

不积跬步无以至千里

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:rem — 一个低调的css单位

下一篇:webstorm下的sass自动编译和移动端自适应实践