divテキストを垂直方向に中央揃えにする方法は何ですか? divテキストを縦方向中央揃えにする方法の紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

divテキストを垂直方向に中央揃えにする方法は何ですか? divテキストを縦方向中央揃えにする方法の紹介

不言

Oct 17, 2018 pm 01:57 PM

垂直方向のセンタリングは、フロントエンドレイアウトで非常に一般的な方法です。次の記事では、div テキストの垂直方向のセンタリングの実装方法を紹介します。

まず、テキストの水平方向の中央揃えは比較的単純であることを知っておく必要があります。行レベル要素は親要素のテキスト位置揃えの中心を設定し、ブロックレベル要素は独自の左右のマージンを設定します。自動。ただし、div テキストの垂直方向の中央揃えはそれほど単純ではないため、div テキストの垂直方向の中央揃えの実装方法をいくつか詳しく見てみましょう。

1.vertical-align 属性を使用すると、テキストを中央に配置できます。よく使用されるのは、中央、下、テキストです。 -bottom など。ただし、実際の使用法では、この属性が「機能する場合もあれば機能しない場合もある」ことがあり、この属性を追加した後でも、img やファイルに変更が見られないことがあります。文章。これは、vertical-align が inline-block や inline、および table-cell などの要素内でのみ機能するためです。

例:

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. line-height を使用してテキストを垂直方向に中央揃えにします

1 行または数行のみを垂直方向に中央揃えにしたい場合テキストの場合、最も簡単に作成できます。テキストの行の高さをコンテナの高さと同じにするだけです。

例:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. パディングを使用してテキストを垂直方向に中央揃えにします

パディングを使用してテキストを垂直方向に中央揃えにすることは、次のようになります。行の高さを使用してテキストを垂直方向に中央揃えにすることは、1 行または複数行のテキストを垂直方向に中央揃えにするのにも適しています。

例:

p { padding:20px 0; }

4. CSS3 変換を使用してテキストを垂直方向に中央揃えにします

例:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5.フレックスレイアウトを使用して、テキストの垂直方向の中央揃えを実現します。

例:

.flex{    /*flex 布局*/
    display: flex;    /*实现垂直居中*/
    align-items: center;    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

この記事は、上記のコードで使用されているさまざまな関数について詳しく学びたいと思います。属性については、PHP 中国語 Web サイトの

css ユーザーマニュアル

および

css3 学習マニュアルを参照してください。！！

以上がdivテキストを垂直方向に中央揃えにする方法は何ですか? divテキストを縦方向中央揃えにする方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

ArtGPT

Stock Market GPT

AIを活用した投資調査により賢明な意思決定を実現

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

PHP チュートリアル

1679

276

NYTの接続はヒントと回答です

331

836

Related knowledge

純粋なCSSを使用してドロップダウンメニューを作成する方法 Sep 20, 2025 am 02:19 AM

HTMLとCSSを使用して、JavaScriptなしでドロップダウンメニューを作成します。 2。：Hover Pseudo-Classを介してSubmenuディスプレイをトリガーします。 3.ネストされたリストを使用して構造を構築し、CSSに非表示および吊り下げのあるディスプレイ効果を設定します。 4。視覚的なエクスペリエンスを向上させるために、トランジションアニメーションを追加できます。

画像がCSSで伸びたり縮小したりするのを防ぐ方法 Sep 21, 2025 am 12:04 AM

useObject-fitormax-widthwithheight：autotopreventimagedistortion; object-fitcontrolshowimagesfillcontainersは、asspectratios、andmax-width：100％; height：autoensuressivescaling withoutwithoutstretching。

CSSでポインターイベントプロパティを使用する方法 Sep 17, 2025 am 07:30 AM

pointer-events-eventsporpertyincssconstrolswhethernelementcanbetheTarget ofpointerevents.1.usepointer-events：nonetodisable interactionsionsionsionsionslikeclicksoversoverseepingtheelementはviseallyvisible.2.applyittooclaallowcliclowcliclavioturtuntowontuntuntointuentointyonelemenmen

CSSでボックスシャドウエフェクトを追加する方法 Sep 20, 2025 am 12:23 AM

usethebox-shadowpropertytoaddropshadows.definehorizontalandaldverticalOffsets、blur、spread、color、andoptionalinsetforinnershadows.multipleshadowsarecomma-separated.example：box-shadow：5px10px8pxrgba（0,0,0,0.3）;

CSSを使用して画像にフィルターを適用する方法 Sep 21, 2025 am 02:27 AM

thecsssfilterpropertyallowseasyimageStylingwithectslikeblur、brightness、andgrayscale.usefilter：filter-function（value）onimagesorbackgroundimages.commonfunctionsincludeblur（px）、輝度（％）、造影（％）、graycal（％）、hue（％）

CSSにグラデーションの背景を追加する方法 Sep 16, 2025 am 05:30 AM

CSS勾配の背景を追加するには、背景または背景イメージ属性を使用して、linear-gradient（）、radial-gradient（）などの関数と協力します。最初に勾配の種類を選択し、方向と色を設定すると、線形勾配（Toright、＃FF7E5F、＃FEB47B）などの色のドッキングポイント、形状、サイズ、その他のパラメーターを介して細かく制御できます。

CSSを使用したリストによろめきのアニメーション効果を作成する方法 Sep 18, 2025 am 12:15 AM

CSSを使用してインターリーブアニメーションエフェクトを作成するには、リスト項目に同じアニメーションを設定する必要がありますが、開始時間は驚異的です。まず、順序付けられていないリストHTML構造を構築し、スライドにフェードする@KeyFramesアニメーションを定義し、次のリスト項目のインクリメンタルアニメーションデレイを次のように設定します。最後に、JavaScriptをオプションで使用して、ビューポートに入るときにトリガーを制御できます。この方法は、要素のタイミングを調整することにより、自然で滑らかなカスケードアニメーションを実現します。

CSSグリッドレイアウトでギャップを作成する方法は？ Sep 22, 2025 am 05:15 AM

GAP、ROW-GAP、または列-GAP属性を使用して、CSSGRIDレイアウトのグリッドアイテム間の間隔を作成します。ギャップは、1つまたは2つの長さの値を受け入れることができる行間隔を設定するための略語属性です。 row-gapと列ギャップは、行と列間の間隔、およびPX、REM、％などのサポートユニットを個別に制御します。

See all articles