放大DIV标记
昨天我问了一个问题How to make text vertically and horizontally center in an HTML page,关于在页面中间(垂直和水平)居中文本的方法。放大DIV标记
该解决方案工作正常,但现在我想增加文本大小,但问题是我不想使用'像'像单位措施,因为是一种静态的方式,无法适应所有屏幕大小。
因此,我想使用文本的百分比单位度量。
HTML代码:
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
我现在面临的困难是与<div />
的高度。我不能把div
的高度等于body
的高度,宽度是相等的,因为div是块元素,但我怎么把div
的高度等于body
的高度?
我已经试图把padding
和margin
为0
和height
到100%
但没有任何工程。
任何人都可以帮助我吗?
我觉得这是你所需要的:
<style type="text/css">
html {height: 100%;}
body {margin: 0;padding: 0;height: 100%;}
.my-block {height:100%;}
</style>
看到它在行动:100% height
但是,如果你想 “适应”你的文字“所有屏幕尺寸”都有一个问题。使用字体大小的百分比和EM单位完全相同(至少在理论上,尽管%在兼容性方面更好) - 它们根据实际大小以像素为单位缩放文本。换句话说,font-size:xx%不会根据其容器高度或宽度缩放文本,而是基于当前文本大小。
你可以达到你想要使用JavaScript的东西。不过,我建议你不要这样做。让用户决定是否需要放大/缩放。
干杯!
它的工作原理,但问题是身体没有填充视口的高度。加入此还有:
html,body{
margin: 0;
padding: 0;
height: 100%;
}
感谢您的快速回答:) 如果您查看链接中的代码,您会看到我已经为body元素定义了这些属性。 – tt0686 2012-03-23 11:20:28
您的原始代码似乎可以在Opera的jsfiddle中使用,请参阅我要添加到帖子中的链接。你能展示你使用的实际代码吗?确保'之间有任何容器。我的块'和身体也有高度设置为100%。 – Supr 2012-03-23 11:28:16
我试图从BODY元素的display:table属性和DIV的display:table-cell属性中获取相同的高度,但文本不再保持居中。所以我的问题是,我怎么能把相同的高度放在使用display:table-cell属性的元素中? – tt0686 2012-03-23 11:31:34
Ehm,在接受的帖子中从昨天开始的代码'div'的高度是100%... 查看http://jsfiddle.net/Mikey/2mgMy/ – 2012-03-23 11:12:00
什么是100%是身高的身体。 如果我清除display:table和display:table-cell从div属性,我意识到DIV从父元素获取相同的高度,在这种情况下BODY.So我可以增加元素的高度显示属性设置为表格单元格? – tt0686 2012-03-23 11:13:48