CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)
CSSでimg画像を中央に配置するにはどうすればよいですか?前回の記事 [cssでimg画像を中央揃えにする方法は？ CSS の表示属性で画像のセンタリングを実現] 画像のセンタリングを実現する表示属性の 2 つの方法を紹介しました。この記事では、位置配置を使用して画像のセンタリングを実現する CSS の 3 つの方法 (コード例) をお届けします。困っている友人は参考にしていただければ幸いです。
1. 画像イメージを中央に配置する CSS 位置を設定し、画像イメージの幅と高さを確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
position: relative;
}
.demo img{
width: 200px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/988/337/945/1539916533300688.jpg" class="lazy" / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
</div>
</body>
</html>レンダリング:
手順:
デモボックスを相対配置に設定し、画像を絶対配置に設定します。このとき、左上: 50%、上: 50% になります。画像の角は div の中央にあります。
画像を中央に配置したい場合は、画像の中心とデモ ボックスの中心が一致する必要があるため、画像を半分だけ上に移動する必要があります。画像の高さの半分、幅の半分だけ左に移動します。
margin-top: -75px; /* 高度的一半 */ margin-left: -100px; /* 宽度的一半 */
#2、CSS の位置決めで img 画像が中央に配置されるように設定されていますが、img 画像の幅と高さがわかりません
1)、画像の中央揃えを実現するための CSS 位置位置変換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
position: relative;
}
.demo img{
width: 200px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/214/416/131/1539921063326606.jpg" class="lazy" / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
</div>
</body>
</html>レンダリング:
手順:
左に設定:50%、上に設定:50%、このとき、画像の左上隅がデモ ボックスの中心に来るようにします。画像の中心がデモ ボックスの中心と一致する限り、画像を中央に配置できます。 (詳細については、方法 1 を参照してください)
それでは、画像の中心をデモ ボックスの中心と一致させるにはどうすればよいでしょうか?画像を画像の高さの半分だけ上に、画像の幅の半分だけ左に移動する必要があります。しかし、画像の幅と高さがわからないのですが、どうすればよいですか?現時点では、transform:translate(-50%,-50%); を使用して、目的の効果を実現します。
2)、画像の中央揃えを実現するための CSS 位置の位置決めマージン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
position: relative;
}
.demo img{
width: 200px;
height: 150px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/214/416/131/1539921063326606.jpg" class="lazy" / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
</div>
</body>
</html>レンダリング:
説明:
デモボックスを相対配置、画像を絶対配置のabsolute、上:0、左:0、右:0、下:0に設定します。このとき、画像の左上と上が一致します。デモ ボックスの左隅:
margin: auto; を使用すると、img 画像がデモ ボックスに対して水平および垂直に配置されます。画像のセンタリング効果が得られます。
要約: 上記は、img 画像を中央に配置するための CSS 位置配置の 3 つの方法を完全に紹介したものであり、皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS3 ビデオ チュートリアル 、Html5 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がCSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
一般的なCSSブラウザの矛盾とは何ですか？
Jul 26, 2025 am 07:04 AM
さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。
アクセントカラーのプロパティとは何ですか？
Jul 26, 2025 am 09:25 AM
Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します
「垂直アライグル」プロパティとその典型的なユースケースを説明してください
Jul 26, 2025 am 07:35 AM
thevertical-AlignPropertyincsSalignSinlineortable-cellElementsive.1.ItadjustsemageSlikeImagesSwitSwitSwithinputswithintingtlinessingVaseLine、Middle、super、andsub.2.IntableCells、ItControlScontEntalInmentWithop、Middle、Orbottomvalues、頻繁に
未使用のCSSをパージする方法は？
Jul 27, 2025 am 02:47 AM
useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic
CSSのテキスト色を変更する方法は？
Jul 27, 2025 am 04:25 AM
CSSのテキスト色を変更するには、色属性を使用する必要があります。 1。色属性を使用して、テキストの前景色を設定し、色名（赤など）、16進コード（＃FF0000など）、RGB値（RGB（255,0,0）など）、HSL値（HSL（0,100％、50％）など）、RGBAまたはHSLAを使用してRGBAまたはHSLA 2. H1からH6タイトル、パラグラフP、リンクAなどのテキストを含む任意の要素に色を適用できます（a：link、a：a：a：hover、a：active、div、spanなどの異なる状態の色設定に注意してください）。 3。最も
CSSダークモードのトグル例
Jul 30, 2025 am 05:28 AM
まず、JavaScriptを使用して、ユーザーシステムの設定とローカルに保存されたテーマ設定を取得し、ページテーマを初期化します。 1. HTML構造には、トピックの切り替えをトリガーするボタンが含まれています。 2。CSSの使用：rootは明るいテーマ変数を定義し、.dark-modeクラスは暗いテーマ変数を定義し、これらの変数をvar（）を介して適用します。 3. JavaScript検出は、カラーのスchemeを好み、LocalStorageを読み取り、最初のテーマを決定します。 4.ボタンをクリックするときにHTML要素のダークモードクラスを切り替え、現在の状態をLocalStorageに保存します。 5.すべての色の変更には、ユーザーを強化するために0.3秒の移行アニメーションが伴います
CSSバックドロップフィルタープロパティを使用する方法は？
Aug 02, 2025 pm 12:11 PM
バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ねることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。
ユーザーエージェントスタイルシートとは何ですか？
Jul 31, 2025 am 10:35 AM
ユーザーエージェントスタイルシートは、カスタムスタイルを追加していないHTML要素がまだ基本的な読み取り可能であることを確認するために、ブラウザーが自動的に適用するデフォルトのCSSスタイルです。それらはページの最初の外観に影響しますが、ブラウザには違いがあり、一貫性のないディスプレイにつながる可能性があります。開発者は、多くの場合、スタイルをリセットまたは標準化することにより、この問題を解決します。 Developer ToolsのComputeまたはStyleパネルを使用して、デフォルトのスタイルを表示します。一般的なカバレッジ操作には、内側および外側のマージンのクリア、リンクのアンダースコアの変更、タイトルサイズの調整、統一ボタンスタイルが含まれます。ユーザーエージェントスタイルを理解することで、クロスブラウザーの一貫性を改善し、正確なレイアウト制御を可能にすることができます。
