web-dev-qa-db-ja.com

HTMLページでテキストを垂直方向および水平方向に中央揃えにする方法

Java=、C、データベース、ネットワーキングなどの経験があります。でも、Htmlに関連するものは何でも初心者です。探しているのは、2つの単語を中央に配置することだけです。ページの（このページにはこれらの2つの単語のみが含まれます）。

                                Word1
                          WORDWORDWORDWORD2

KompoZerのようなWYSIWYGソフトウェアをいくつか試しましたが、ソースコードを見ると、ページの垂直方向の中央を達成するために<br>を多く含む恐ろしい静的コードが生成されていました。この問題の解決策

htmlcsstext-alignment
13
tt0686

水平方向の中央揃えは簡単です。CSSでは、垂直方向の中央揃えは実際にはサポートされていないため、少し注意が必要です（表のセル以外に<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>
25
acme

テキストを<div>およびCSSを使用してテキストを整列します。

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

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

jsFiddle の例

2
Teneff

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

あなたが新しいと言ったので、ドキュメント構造全体を示しています。スタイルは、最初に読み込まれるようにヘッドタグ内に配置する必要があります。インラインスタイルはできる限り避けてください。

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>Word1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>
1
Chris Sobolewski

ちょうどそれをする

<div style="text-align:center;">
   Word1<br />
   WORDWORDWORDWORD2
</div>
0
irfanmcsd

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

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

0
Gatekeeper