DIVまたはDIVで画像を水平方向と垂直方向に中央揃えする方法

DIVまたはDIVで画像を水平方向と垂直方向に中央揃えする方法

<div class="box">
  <画像 />
</div>

水平方向に中央揃えする一般的な方法:

text-align:center ——これにより、サブ要素のフォントと画像を水平方向に中央揃えできます。

margin:0 auto - これはブロック要素の水平方向の中央揃え方法です

垂直方向に中央揃えする一般的な方法:

vertical-align: middle;—この垂直中央揃えプロパティは、インライン要素またはインラインブロック要素に対してのみ有効です。

flexの垂直センタリングの使用はここでは考慮されません

div 内で画像を水平方向と垂直方向に中央揃えする方法:

最初の方法: 直接手動で計算します。ボックスの高さと画像の高さを知る

。箱{
    幅: 300ピクセル;
    高さ: 300px;
    境界線: 1px 実線の赤;
    テキスト配置: 中央;
}
画像{
    幅: 80ピクセル;
    高さ: 80px;
    パディング上部: 110px;
}

注: この方法は、ボックスの高さから画像の高さを引いて、それを 2 で割ります。これが padding-top の値です。もちろん、margin-top を使用することもできます。これにより、div 内の画像を垂直方向に中央揃えすることもできます。テキストを水平方向に中央揃えにするには、text-align: center; を使用します。

2番目の方法:画像の幅と高さがわかっている

 画像{
     位置:相対;
     上位:50%;
     残り:50%;
     上余白: ネガティブ画像の高さの半分。
     左余白: ネガティブ画像の幅の半分。
   }

3 番目の方法: 画像の幅と高さは不明で、ボックスの高さは固定することが望ましいです。

画像{
    位置: 相対的;
    上位: 50%;
    左: 50%;
    変換: translate(-50%,-50%);
}

注意: 固定されておらず、高さが適応型の場合、画像はおそらく div より少し上に移動されます。 CSS3 を使って水平方向と垂直方向の中央揃えを実現する方法です。もちろん互換性があればですが、transform がサポートされていない場合はこの方法はサポートされません。

4 番目の方法: ボックスをセルとして扱います。ボックスの幅と高さを設定する必要はなく、画像が自動的に拡大されるようにします。このようにして、ボックスの幅と高さは固定されることが望ましい。もちろん固定しなくても効果は得られます。

。箱{
    幅: 300ピクセル;
    高さ: 300px;
    垂直位置合わせ: 中央;
    テキスト配置: 中央;
    表示: テーブルセル;
    境界線: 1px 実線の赤;
}

注意: display: table-cell は、ラベル要素をセルとして扱うことと同じです。唯一の欠点は、IE6/7 と互換性がないことです。

5 番目の方法: テーブルを使用して、水平および垂直の中央揃えの効果を実現します。テーブルの幅と高さは分かっている

html:

 <テーブルクラス="img_meng_show">
   <tr>
     <td>
        <画像ソース="">
     </td>
   </tr>
 </テーブル>

css:

 .img_meng_show td{
   垂直位置合わせ: 中央;
    テキスト配置: 中央;
 }

DIV を水平方向と垂直方向に中央揃えする方法:

最初の方法:

HTML:

<div class="box">

css:

  。箱{
    position:absolute (または fixed);
    トップ:0;
    左:0;
    下:0;
    右:0;
   マージン:自動;
    幅:100ピクセル;
    高さ:200px;
 }

これにより、div の垂直方向と水平方向の中央揃えを実現できますが、必要な条件として、幅と高さを追加し、余白も追加する必要があります。画像を水平方向と垂直方向に中央揃えにしたい場合は、上記のように margin-left を使用できます。

垂直方向に中央揃えしたいだけの場合は、top と bottom を使用し、margin:auto 0; を指定します。

同様に、水平方向に中央揃えにしたい場合は、top と bottom を使用し、margin: 0 auto; とします。

ただし、この方法は IE8 以下をサポートしていません。

2番目の方法:

CSS3 の translate メソッドを使用すると、div を垂直方向と水平方向に中央に配置することもできます。

。箱{
    位置: 固定 (または絶対)。
    上位: 50%;
    左: 50%;
    幅: 100ピクセル;
    /*height: 100px;*/高さは固定できます background: skyblue;
    変換: translate(-50%,-50%);
}

divの中にdivがある場合、つまり

<div class="out">
    <div class="in"></div>
</div>

この構造は、div 内で画像を水平方向と垂直方向に中央揃えする方法を参考にして実現することもできます。ブロック要素を水平方向に中央揃えするだけの場合は、text-align: center; を margin: 0 auto; に置き換える必要があります。

要約する

上記は、私が紹介した DIV または DIV 内の画像を水平方向と垂直方向に中央揃えする方法です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  DockerにFastDFSをインストールする方法

>>:  タブ切り替え効果を実現するJavaScript

推薦する

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

Debian Dockerコンテナにcrontabスケジュールタスクを追加する

現在、DockerイメージのほとんどはDebianベースです # cat /etc/issue De...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

Vueリクエストインターセプターの設定方法の詳しい説明

以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...

IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)

IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...

Windows 2016 Server セキュリティ設定

目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...

Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...

Vue.js での VNode の使用

VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...

画像内のrarファイルを隠す方法

このロゴを .rar ファイルとしてローカルに保存し、解凍して効果を確認することができます。よりシン...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

Linux suse11でルートパスワードを忘れた場合に変更する方法の簡単な分析

SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...

MySQL の無効な左結合の問題を解決する方法とその使用上の注意

MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...

node-media-serverを使用してシンプルなストリーミングメディアサーバーを構築する

node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...