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

方法一：

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

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

转载于:https://www.cnblogs.com/luoluo8/p/5802133.html

父元素高度固定，如何使其中的文字垂直居中？相关推荐

65、如何解决浮动引起的父元素高度塌陷
1. 父元素高度塌陷的原因父容器的高度是内部容器撑开的,当子元素元素浮动后,脱离了正常文档流,导致父容器的高度塌陷,高度变为0px. 2.如何清除浮动 1. overflow: hidden; 原理 ...
垂直居中-父元素高度确定的多行文本（方法二）
除了上一节讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法.但这种方法兼容性比较差,只是提供大家学习参考. 在 chrome.firefox 及 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
css 子元素设置float,父元素高度塌陷
以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="conta ...
垂直居中之父元素高度确定的文本
父元素高度确定的文本分为:单行文本和多行文本. 1.如何设置单行文本垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的 ...
解决CSS子元素绝对定位致使父元素高度为0
方法: 使用JS 代码: // 解决子元素决定定位父元素高度塌陷 var father = document.querySelector('.father '); var son = document ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...

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

父元素高度固定，如何使其中的文字垂直居中？相关推荐

最新文章

热门文章

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

父元素 高度固定，如何使其中的文字垂直居中？相关推荐

最新文章

热门文章

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

父元素高度固定，如何使其中的文字垂直居中？相关推荐