我應該如何更改這個html代碼片段，以便文本Hello World在屏幕中間垂直顯示？

-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Title</title> 
</head> 
<body style="width: 100%; height: 100%"> 
    <table cellspacing="1" style="width: 100%; height: 100%"> 
     <tr> 
      <td valign="middle" align="center"> 
      <h1>Hello World</h1> 
      </td> 
     </tr> 
    </table> 

</body> 

</html>

該html代碼段的結果是Hello World這個詞在屏幕上方。我盡一切努力使它在中間。我能做什麼？我應該如何更改這個html代碼片段，以便文本Hello World在屏幕中間垂直顯示？

我嘗試使用垂直對齊風格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>How to get Sexier Avatar in IMVU 2</title> 
</head> 
<body style="width: 100%; height: 100%"> 
<div style="height: 100%;width: 100%;vertical-align: middle"> 
<h1>Click here to Get Game and See Yourself</h1> 
</div> 

</body> 

</html>

我清楚地表示，對於格垂直對齊應該是中間的另一種方式。它不起作用。

看起來身體的大小不是全屏。我如何使其全屏？

來源

2017-02-27 J. Chang

其2017年你爲什麼要使用表的佈局？ – mehulmpt

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp – mtizziani

不起作用。試過。更新問題 –

<!doctype HTML> 
<html> 
<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Title</title> 
<style> 
#centerInScreen { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
} 
#centerInScreen h1 { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
} 
</style> 
</head> 
<body> 
<div id="centerInScreen"> 
<h1>Hello World!</h1> 
</div> 
</body> 
</html>

以此爲中心在屏幕上。

來源

2017-02-27 15:26:17 mehulmpt

讓我試試。它的工作原理 –

即使沒有變換元素，它也能工作 –

@JimThio嘗試添加2-3行，看看有無變換。你會看到差異 – mehulmpt

使用CSS

<div class="center">Hello World</div> 

.center { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-left: -50px; /* margin is -0.5 * dimension */ 
    margin-top: -25px; 
}

來源

2017-02-27 15:30:38 pee2pee

我希望文本具有靈活性。所以手的大小是不知道的。我不認爲這是可能的。 –

是的，這是可能的。我剛剛向你展示過。寬度/高度僅用於容器 – pee2pee

我應該如何更改這個html代碼片段，以便文本Hello World在屏幕中間垂直顯示？

回答

相關問題