検索

ホームページ  >  に質問  >  本文

div ブロック内でテキストを (水平方向と垂直方向に) 中央揃えにするにはどうすればよいですか?

<p><code>div</code> を <code>display:block</code> に設定しています (<code>90px</code> <code>height</code> および < ;code>width</code>)、中にテキストが入っています。</p> <p>テキストを垂直方向に中央揃え、水平方向に揃える必要があります。 </p> <p><code>text-align:center</code>を試しましたが、垂直方向の中央揃えの部分が行われないので、<code>vertical-align:middle</code>を試しましたが、うまくいきませんでした。</p> <p>何かアイデアはありますか? </p>
P粉969253139P粉969253139541日前615

全員に返信(2)返信します

  • P粉201448898

    P粉2014488982023-08-25 15:00:14

    2014 年時点で一般的に使用されているテクノロジー:

    • 方法 2 - フレックスボックス方法:

      ここに例を示します / 全画面例

      サポートされているブラウザ

      では、ターゲット要素の display を flex に設定し、垂直方向の中央揃えに align-items:center を使用します。水平方向の中央揃えには justify-content: center を使用します。追加のブラウザ サポートのためにベンダー プレフィックスを追加することを忘れないでください (例を参照 )。 リーリー

    アプローチ 3 -
      table-cell
    • /

      vertical-align: middle:

      ここに例を示します

      / 全画面例 場合によっては、html

      /

      body 要素の高さが 100%. に設定されていることを確認する必要があります。 垂直方向の配置の場合、親要素の width

      /

      height を 100% に設定し、display: table を追加します。子要素で、display を table-cell に変更し、vertical-align: middle. を追加します。 水平方向の中央揃えの場合は、text-align: center

      を追加してテキストと他の

      inline 子要素を中央揃えにするか、margin: 0 を使用します。 auto 要素が block level. であると仮定します。 リーリー

    アプローチ 4 - 変位:
    アプローチ 5 -
    方法 4 と 5 は最も信頼できるものではありません。上位 3 つから 1 つを選択します。

    返事
    0
  • P粉762730205

    P粉7627302052023-08-25 11:59:53

    一行のテキストや画像であれば、簡単に実行できます。次のように使用してください:

    リーリー ＃＃＃それでおしまい。複数行にできる場合は、少し複雑になります。ただし、

    http://pmob.co.uk/ に解決策があります。 「垂直配置」を探してください。

    それらはハックや複雑な div の追加になる傾向があるため...私は通常、単一のセルを持つテーブルを使用してこれを実行します...できるだけシンプルにするために。

    2020 アップデート:

    Internet Explorer 10 などの以前のブラウザで動作させる必要がない限り、Flexbox を使用できます。

    これは、現在のすべての主要ブラウザで広くサポートされています。基本的に、コンテナはフレックス コンテナとして指定され、その主軸と水平軸に沿って中心に配置される必要があります。 リーリー 「フレックス項目」と呼ばれる子項目の固定幅を指定します:

    リーリー

    例:

    http://jsfiddle.net/2woqsef1/1/

    コンテンツをシュリンクラップするには、さらに簡単です。flex アイテムから

    flex: ...

    行を削除するだけです。自動的にシュリンクラップされます。 例:

    http://jsfiddle.net/2woqsef1/2/

    上記の例は、MS Edge や Internet Explorer 11 などの主要なブラウザでテストされています。

    カスタマイズする必要がある場合の技術的な注意点: フレックス項目の内部では、このフレックス項目自体はフレックス コンテナーではないため、CSS の古い非フレックスボックス方式は期待どおりに機能します。ただし、フレックス項目を追加すると、 item を現在のフレックス コンテナに追加すると、2 つのフレックス アイテムは水平に配置されます。それらを垂直に配置するには、

    flex-direction: column;

    をフレックス コンテナに追加します。これがフレックス コンテナ間でどのように機能するかです。およびその immediate 子要素。 センタリングを行う別の方法があります。フレックス コンテナの主軸と交差軸の分布に

    center

    を指定せず、代わりに margin: auto を指定します。フレックス アイテムが 4 方向すべての余分なスペースを占めるようにし、マージンが均等に分散されているため、フレックス アイテムが全方向の中央に配置されます。これは、フレックス アイテムが複数ある場合を除いて機能します。また、この手法は MS Edge では機能しますが、MS Edge では機能しません。 Internet Explorer 11.

    2016/2017 更新:

    これは、

    transform

    を使用してより一般的に実行でき、Internet Explorer 10 や Internet Explorer 11 などの古いブラウザでもうまく動作します。複数行のテキストをサポートできます: リーリー 例:

    https://jsfiddle.net/wb8u02kL/1/

    シュリンクラップ幅:

    上記のソリューションでは、コンテンツ領域に固定幅を使用します。シュリンクラップ幅を使用するには、

    を使用します。 リーリー

    例:

    https://jsfiddle.net/wb8u02kL/2/

    Internet Explorer 10 のサポートが必要な場合、フレックスボックスは機能せず、上記のメソッドと

    line-height

    メソッドが機能します。それ以外の場合は、フレックスボックスで機能します。

    返事
    0
  • キャンセル返事