如何在HTML中使用CSS仅垂直居中文本

我有一个非常简单的HTML。由于一些限制，我无法修改html内容。我只想使用css垂直居中文本。如何在HTML中使用CSS仅垂直居中文本

<html> 
<head>...</head> 
<body> 
<div>Ops, the webpage is currently not available</div> 
</body> 
</html>

请注意，html的大小可以是可变的。

另外，如果文本不能显示在一行中，则应该分成多行。

可能吗？

来源

2010-05-31 stanleyxu2005

我认为vertical-align只适用于表格中的内容。对于简单的页面，您可以将内容放在表格中而不是div上以避免此问题。

有一些解决方法，请http://phrogz.net/css/vertical-align/index.html

来源

2010-05-31 11:41:05 Matschie

CSS的崭新世界。你必须使用'position：absolute'或'line-height'来做一些像垂直对齐某些内容那样复杂的事情。（不批评你@matschie，只是不理解把这个标准放在一起的委员会是什么*想*） – 2010-05-31 11:48:58

真的IE的错误，否则使用'display：table'将工作正常。 – 2010-05-31 11:56:42

“行高”实际上存在问题。如果文本太长，其余部分不在可见区域。无论如何，我已经放弃了。我用一个表来代替。 – stanleyxu2005 2010-05-31 11:59:22

<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>

来源

2010-05-31 11:46:53 Bakhtiyor

您可以跳过宽度，高度，边框属性。它们仅用于显示任务。 – Bakhtiyor 2010-05-31 11:48:13

这不会在IE 6和7中工作。 – 2010-05-31 11:54:22

虽然'table-cell'不支持IE <= 7. – 2010-05-31 11:55:06

另一种可能的解决方案：

<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">Ops, the webpage is currently not available</div> 
</div> 
</body> 
</html>

来源

2010-05-31 11:48:21

-1

请使用下面的代码行居中DIV内容

<html> 
<head> 
</head> 
<body> 
<i> 
    <div style="text-align:center;"> 
    Hello 
    </div> 
</i> 
</body> 
</html>

来源

2013-06-20 20:32:06

'text-align：center;'只能水平对齐文本，而不是asker需要的垂直文本。 – Cinder 2013-08-22 17:31:46

-1

试试这个：

.text-tag{ 

    text-align:center; 
    margin-top: 25%; 
}

并将“text-tag”应用于要居中的文本。

来源

2013-11-02 01:42:01 ENSATE

<!DOCTYPE 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>

来源

2014-09-09 18:56:25

如何在HTML中使用CSS仅垂直居中文本

回答

相关问题