父元素 高度固定,如何使其中的文字垂直居中?

方法一:

设置父元素高度,设置子元素行高垂直居中

<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以下不兼容!

时间: 2024-10-10 18:31:50

父元素 高度固定,如何使其中的文字垂直居中?的相关文章

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是要求固定的宽度,宽度计算错误就会带来整个布局的错乱. float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局,所以float浮动带来的父元素高度没有的问题并不是我们说的是一个  BUG,这本身就是float的特性. 以下是解决float浮动带来的父元素高度没有的问题 测试为I

子元素浮动时无法撑开父元素,父元素高度为0的解决方法

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. <div> <div style="float:left;height:200px;">child</div> <div style="clear:both;"></div> </div>

垂直居中-父元素高度确定的多行文本(方法二)

除了上一节讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法.但这种方法兼容性比较差,只是提供大家学习参考. 在 chrome.firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align属性,但注意 IE6.7 并不支持这个样式, 兼容性比较差. html代码: <div class="container"> <d

垂直居中——父元素高度确定的单行文本、父元素高度确定的多行文本

声明:来自http://www.imooc.com/learn/9 学习 父元素高度确定的单行文本的竖直居中 是通过设置父元素的 height 和 line-height 高度一致来实现的. .container{ height:100px; line-height:100px; background:#999; } 父元素高度确定的多行文本 使用插入 table (包括tbody.tr.td)标签,同时设置 vertical-align:middle. <body> <table>

CSS父元素高度随子元素高度变化而变化

<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局,让父元素高度变0px */ &l

垂直居中-父元素高度确定的单行文本

我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好. 这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本. 本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本.图片等的竖直居中的方法有两种: 方法一:使用插入 table  (包括tbody.tr.td)标签,同时设置 vertical-align:middle. css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用.下面看一下例子: html代码: <body> <table><tbody><tr><td class="wrap"&