Css 中单行及多行文字如何实现水平垂直居中? | 您所在的位置:网站首页 › 单行文字和多行文字 › Css 中单行及多行文字如何实现水平垂直居中? |
本文和大家分享的主要是css中单行及多行文字水平垂直居中相关内容,一起来看看吧,希望对大家学习css有所帮助。 一、单行文字 1. line-height、text-align(兼容性ie6/7) CSS代码(为了节省空间,建议不要单行书写css样式) .new{ height:5em; line-height:5em; text-align:center; border:1px solid #ddd; }
css及html 2.display:flex、just-content:center、line-height(不兼容性ie6/7/8/9) .new{ display:flex; justify-content:center; height:5em; line-height:5em; border:1px solid #ddd; }
css及html 二、多行文字 1. 父元素line-height、子元素 display、vertical-align、line-height(不兼容IE6/7) .middle-content{ width:80%; height:500px; line-height:500px; text-align:center; margin:0 auto; border:1px solid #000; } .middle-context{ display:inline-block; vertical-align:middle; line-height:50px; }
ie6及ie7不支持 2. 父元素display:table,子元素display:table-cell、 vertical-align:middle;(不兼容IE6/7) .middle-content{ display:table; width:80%; height:500px; text-align:center; margin:0auto; border:1px solid#000000; } .middle-context{ display:table-cell; vertical-align:middle; line-height:50px; }
ie及ie7不兼容 3. 利用定位及display(兼容IE6/7) .container{ *position:relative; display:table; height:500px; border:1px solid#000; width:700px; margin:0auto; } .middle-content{ *position:absolute; *top:50%; *left:50%; display:table-cell;vertical-align:middle; text-align:center; width:100%; } .middle-context{ *position:relative; *top:-50%; *left:-50%; line-height:50px; }
兼容ie6/ie7 4.使用空标签 .container{ height:500px; border:1px solid#000; width:500px; margin:0auto; text-align:center; } .middle-content{display:inline-block; vertical-align:middle; *display:inline; *zoom:1; } .middle-context{ line-height:50px; } .nothing{ display:inline-block; width:0; height:100%; vertical-align:middle; }
兼容ie6/7
来源:简书 |
CopyRight 2018-2019 实验室设备网 版权所有 |