父元素 高度固定,如何使其中的文字垂直居中?
2016-08-24 11:17
316 查看
方法一:
设置父元素高度,设置子元素行高垂直居中
关键样式:
① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线
② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height。所以这里要设置inline-block。
重新审视一下 CSS vertical-align 属性 的定义:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
由以上需要注意 :
① vertical-align属性应该设置到 行内元素上(行内块元素也可)
② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。
③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。
缺点:必须设置父元素高度
方法二:
利用display:table-cell。
优点:等高布局,无需设置高度,文字轻松实现垂直居中
缺点:ie7以下不兼容!
设置父元素高度,设置子元素行高垂直居中
<style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </style> <div> <span>测试文字测试文字</span> </div> <div> <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span> </div>
关键样式:
① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线
② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height。所以这里要设置inline-block。
重新审视一下 CSS vertical-align 属性 的定义:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
由以上需要注意 :
① vertical-align属性应该设置到 行内元素上(行内块元素也可)
② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。
③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。
缺点:必须设置父元素高度
方法二:
利用display:table-cell。
<style> *{padding: 0;margin:0;font-size: 12px;} div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;} </style> <div> <span>测试文字测试文字</span> </div> <div> 测试文字测试文字 </div> <div> <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span> </div>
优点:等高布局,无需设置高度,文字轻松实现垂直居中
缺点:ie7以下不兼容!
相关文章推荐
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- css-多行文字固定高度垂直居中(ie6.7.8.9 chrome ff)
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- 文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- 深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- 宽度高度不固定的div 如何水平居中以及垂直居中
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- 高度和宽度不固定元素水平和垂直居中的实现(父元素高度和宽度固定)(完美解决兼容问题)
- css-多行文字固定高度垂直居中(ie6.7.8.9 chrome ff)
- 固定高度不确定文字行数的垂直居中问题
- 宽度高度不固定的div 如何水平居中以及垂直居中
- 宽度高度不固定的div如何水平居中与垂直居中(转)
- 让文字在固定高度的div中垂直居中显示
- 块级元素高度不固定实现垂直居中效果
- css——多行文字固定高度垂直居中(ie6.7.8.9 chrome ff)