我有一个非常简单的 HTML。由于某些限制,我无法修改 HTML 内容。我只想使用 CSS 将文本垂直居中。
<html>
<head>...</head>
<body>
<div>Oops, the webpage is currently not available.</div>
</body>
</html>
请注意,HTML 的大小是可变的。
另外,如果文字不能在一行显示,应该分成多行。
是否可以?
我认为垂直对齐仅适用于表格中的内容。对于您的简单页面,您可以将内容放在表格而不是 div 中以避免此问题。
另一种可能的解决方案:
<html>
<head>
<title>Title</title>
<style>
body {height:100%}
</style>
</head>
<body>
<div style="height:100%;">
<div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
</div>
</body>
</html>
<html>
<head>...
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.vertical {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="vertical">
Centered
</div>
</body>
</html>
试试这个:
.text-tag{
text-align: center;
margin-top: 25%;
}
并将“文本标签”应用于要居中的文本。