15

私はJava、C、データベース、ネットワーキングなどの経験があります.しかし、Htmlに関連するものは何でも私は初心者です.私が探している唯一のことは、ページの中央に2つの単語を配置することです(このページにはこの二つの言葉）。

                                WORD1
                          WORDWORDWORDWORD2

KompoZer のような WYSIWYG ソフトウェアをいくつか試してみましたが、ソース コードを調べたところ、<br>ページの垂直方向の中央を実現するために大量の恐ろしい静的コードが生成されていました。

4

7 に答える 7

29

水平方向のセンタリングは簡単です - css では垂直方向のセンタリングは少しトリッキーです。これは実際にはサポートされていないためです ( table cells 以外に<td>、テーブルが実際にテーブルとして必要でない限り、レイアウトには悪いスタイルです)。ただし、意味的に正しい html タグを使用して、テーブル表示プロパティを適用することはできます。

これは考えられる解決策の 1 つです。多くのアプローチがあります。

あなたの場合、そのようなもので十分です：

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>
于 2012-03-22T15:58:57.157 に答える
2

テキストを a 内に配置し、<div>CSS を使用してテキストを揃えることができます。

<div style="text-align:center;">
    WORD1<br />
    WORDWORDWORDWORD2
</div>

これ<div>はブロック要素です。つまり、幅 100% に引き伸ばされ、テキストがページの中央に配置されます。

jsFiddle の例

于 2012-03-22T15:52:03.553 に答える
1

それを行うための「ベストプラクティス」の方法は次のとおりです。

あなたは初心者だと言うので、文書構造全体をお見せします。スタイルは head タグに入れて最初に読み込まれるようにする必要があり、インライン スタイルはできるだけ避ける必要があります。

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>WORD1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>
于 2012-03-22T15:51:28.690 に答える
0

ちょうどそれのように

<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>
于 2012-03-22T15:49:58.317 に答える
0

最良の方法は、div などの要素に配置することです。div内では、テキストを簡単に中央に配置できますtext-align: center;（そのdivに幅を設定すると仮定します）。次に、自動マージンスタイルを追加して、その div をページの中央に配置できます ( margin: 0px auto;)

センタリングに関する w3 マニュアル ;-)

于 2012-03-22T15:51:09.820 に答える
-1

<center>テキストを中央に配置するには、 HTML タグを使用できます。

<center>Blah</center>

または、CSS を使用できます。

<style>
  .centered_text {
    text-align:middle;
  }
</style>

<a class='centered_text'>Blah</a>
于 2012-03-22T15:50:35.403 に答える