Hello Worldが画面の中央に垂直になるようにこのhtmlスニペットを変更するにはどうすればよいですか？

-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が画面の上に表示されます。私は中にそれを作るためにすべてをしました。私に何ができる？ Hello Worldが画面の中央に垂直になるようにこのhtmlスニペットを変更するにはどうすればよいですか？

は、私ははっきりとdiv要素の垂直方向の整列が途中であることを述べた

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

Hello Worldが画面の中央に垂直になるようにこのhtmlスニペットを変更するにはどうすればよいですか？

答えて

関連する問題