0

私は通常、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">   
<body>
    <div style="width:100%; height:100%; text-align:center">
      <img src="http://dummyimage.com/100x50/fc0/000000.png"
        style="float:middle">
        <br>
        Hello World!
     </div>    
   </body> 
 </html>

テーブルがテーブルの場合にのみ使用するように読みましたが、試しました：

コード バージョン 2 (動作しない):

<!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">
 <body>
  <table width="100%" border="0" height="100%" align="CENTER">
    <tr><td align="CENTER">  
        <img src="http://dummyimage.com/100x50/fc0/000000.png"
        style="float:middle">
        <br>
        Hello World!
    </td></tr> 
     </table>
   </body>
</html>

コード バージョン 3 (動作、なぜ?):

<html>
 <body>
  <table width="100%" border="0" height="100%" align="CENTER">
    <tr><td align="CENTER">  
        <img src="http://dummyimage.com/100x50/fc0/000000.png"
        style="float:middle">
        <br>
        Hello World!
    </td></tr> 
     </table>
   </body>
</html>
4

3 に答える 3

4

以下は、垂直方向と水平方向の中央に配置するための適切なアプローチです。

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/demo.html

于 2013-03-12T23:23:22.897 に答える
1

画像の幅を設定し、次を使用します。

<img width:"900px" style="margin:0 auto">

これは、上下のマージンが 0 で、両側が自動であることを意味します。

編集：テーブルを使用しないでください。これを使用してください：

<div style="width:900px;margin:0 auto">
<img width:"900px">
your text
</div>

全体を真ん中に置きたい場合。

于 2013-03-12T23:12:20.707 に答える
0

3 番目のバージョンには doctype 宣言がなく、ほとんどのブラウザーで " quirks モード" がトリガーされます。これは、「標準モード」の場合ほど仕様に厳密に従っていないことを意味し、その結果、表示されている動作が発生します。それはあなたが取得しようとしているものかもしれませんが、技術的には正しくありません。

要するに、HTML/CSS で何かを垂直方向に中央揃えする標準的な方法はありません。

于 2013-03-12T23:20:48.713 に答える