如何在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僅垂直居中文本

回答

相關問題