我应该如何更改这个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>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年你为什么要使用表的布局？ – 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>

以此为中心在屏幕上。

让我试试。它的工作原理 –

即使没有变换元素，它也能工作 –

@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; 
}

我希望文本具有灵活性。所以手的大小是不知道的。我不认为这是可能的。 –

是的，这是可能的。我刚刚向你展示过。宽度/高度仅用于容器 – pee2pee

我应该如何更改这个html代码片段，以便文本Hello World在屏幕中间垂直显示？

相关推荐