vertical-align:middle居中,Firefox中换行问题
2018-06-24 01:00:25来源:未知 阅读 ()
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- 12.居中总结 2020-04-17
- 利用vertical-align属性实现分隔符 2020-04-03
- 简单理解vertical-align属性和基线 2020-04-03
- div中图片和文字同一行实现垂直居中 2020-03-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash