昨天我问了一个问题How to make text vertically and horizontally center in an HTML page,关于在页面中间(垂直和水平)居中文本的方法。
解决方案工作正常,但现在我想增加文本大小,但问题是我不想使用'px'之类的单位度量,因为它是一种静态方式,无法适应所有屏幕尺寸
因此,我想使用文本的百分比单位度量。
HTML code:
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
我面临的困难是<div />
的高度。我不能将div
的高度等于body
的高度,宽度相等,因为div是块元素,但我如何将div
的高度等于到body
的高度?
我已尝试将padding
和margin
设为0
,将height
设为100%
,但无效。
任何人都可以帮助我吗?
答案 0 :(得分:1)
我认为这就是你所需要的:
<style type="text/css">
html {height: 100%;}
body {margin: 0;padding: 0;height: 100%;}
.my-block {height:100%;}
</style>
查看实际操作:100% height
但是,如果你想“调整”你的文字“适用于所有的屏幕尺寸”,那就有一个问题。与font-size一起使用的百分比和EM单位完全相同(至少在理论上,虽然%在兼容性方面更好) - 它们根据文本的实际大小(以像素为单位)缩放文本。换句话说,font-size:xx%不会根据容器的高度或宽度缩放文本,但会根据当前文本大小进行缩放。
您可以使用javascript实现您想要的效果。不过我建议你不要这样做。让用户决定是否需要放大/缩放。
干杯!
答案 1 :(得分:0)
它有效,但问题是身体没有填充视口的高度。添加它:
html,body{
margin: 0;
padding: 0;
height: 100%;
}