文字垂直居中自适应

[晴明qm]

文字垂直居中自适应，使用line-height的话，需要固定高度，缩放不好看。
使用padding,margin的话也不是很好控制，到底该怎么做到文字垂直居中自适应呢？

[纯洁袜子]

引用 3 楼 doyoucnm 的回复:

[quote=引用 2 楼 zyb112211 的回复:]

<div id="aa">
		<img style="vertical-align:middle;height:100%"><span>asdfasdf</span>
	</div>

可以用vertical-align:middle;对齐方式，在文字前面加上一个空img，给这个空img设置vertical-align:middle;样式找到基线，文字自然就垂直居中了 http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

可以垂直居中没错，但是在子DIV中，如果不给父DIV设置height ,这个height:100%就占满满屏了，然后又还是要固定高度数值？？[/quote]。。。。。。那你还是用jquery动态获取div实际高度吧。在jquery事件窗口改变事件中获取div实际高度，然后给文字设置行高吧

[香蕉猪]

jq获取实际高度，设置line-height

[纯洁袜子]

<div id="aa">
		<img style="vertical-align:middle;height:100%"><span>asdfasdf</span>
	</div>

可以用vertical-align:middle;对齐方式，在文字前面加上一个空img，给这个空img设置vertical-align:middle;样式找到基线，文字自然就垂直居中了 http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

[dongjunhui2010]

display:table display:table-cell

[晴明qm]

引用 2 楼 zyb112211 的回复:

<div id="aa">
		<img style="vertical-align:middle;height:100%"><span>asdfasdf</span>
	</div>

可以用vertical-align:middle;对齐方式，在文字前面加上一个空img，给这个空img设置vertical-align:middle;样式找到基线，文字自然就垂直居中了 http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

可以垂直居中没错，但是在子DIV中，如果不给父DIV设置height ,这个height:100%就占满满屏了，然后又还是要固定高度数值？？

[KK3K2005]

引用 3 楼 doyoucnm 的回复:

[quote=引用 2 楼 zyb112211 的回复:]

<div id="aa">
		<img style="vertical-align:middle;height:100%"><span>asdfasdf</span>
	</div>

可以用vertical-align:middle;对齐方式，在文字前面加上一个空img，给这个空img设置vertical-align:middle;样式找到基线，文字自然就垂直居中了 http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

可以垂直居中没错，但是在子DIV中，如果不给父DIV设置height ,这个height:100%就占满满屏了，然后又还是要固定高度数值？？[/quote] 用table 另外 这个世界有多少页面 需要 文本动态剧中呢

[ustbtaotao]

可以参考我的博客http://www.icafebolger.com/html/htmlmiddle.html

[tomorrow93]

我一般都是用padding的，如果想获取容器的高可以用JS

[tanshile7662]

把line-height和height设置的同样大，这样不行吗？ 我还知道一个垂直居中的方法： 把自己本身设置vertical-align：middle；（必须是行内元素） 然后在后面加一个span， span{ width:0px; height:100%; vertical-align：middle； }