ホームページ > 記事 > ウェブフロントエンド > HTMLで画像を中央揃えに設定する方法
HTML では、margin 属性を使用して画像を中央に配置します。画像要素に「margin:auto」スタイルを設定するだけです。 margin 属性値が「auto」の場合、要素を中央揃えにするという目的を達成するために、要素が親コンテナの左右のマージンを均等に占めるように、ブラウザは自動的に左右のマージンを割り当てます。 。
このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
Body タグの下に img タグを作成し、ドキュメントに画像を挿入します。ブラウザの左上隅に画像が表示されます。ここで引用した画像のサイズは 200*125px になります。
<img src="img/1.jpg" alt="图片">
img の外側に div ブロック タグを作成し、div の幅を設定してファイルを中央に配置できます margin:0 auto;
<img src="img/1.jpg" alt="图片">
画像を相対位置に設定し、パーセンテージで中央に配置することもできます。
div{ position:relative; left:50%; }
距離は次のとおりであるため、ブラウザで効果をプレビューします。左 50% の距離に設定すると、現在の画像の左側がドキュメントの中央に配置されます。
画像を中央に配置する場合は、画像を移動する必要があります。左側の画像 幅の半分なので、画像のサイズを知る必要があります。この画像のサイズは 200*125 なので、画像フレームを 100px 左に移動するだけです。外側に移動するため、マイナスを与えます。 value left:-100px; 最終的な効果は図の通りです 画像が中央に配置されています この設定後は、画面がどんなに大きくても画像が中央に表示されます。
div{ position:relative; left:50%; margin-left: -100PX; }
推奨学習: html ビデオ チュートリアル
以上がHTMLで画像を中央揃えに設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。