2014年3月26日 11:07

CSSで画像(imgタグ)を中央揃えに。marginの上下左右を指定する記述方法。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

CSSのメモ。間違えて覚えてた

ブログのHTMLやCSSを色々と見直していたら、間違えて覚えている部分がありました。CSSによる画像の中央配置についてmarginの基本を覚えておくと良さそうです。

スポンサードリンク

display:block;margin: 0 auto; が正しい

正しいと言うと他はダメみたいなニュアンスですが、これが一番端的に書けるという話です。

<img src="logo.jpg" class="aPostImg">
.aPostImg{
display: block
margin: 0 auto;
}

display:blockでまずは要素をブロックに指定します(ブロック要素は、開始タグから終了タグの間をひとまとめにして、要素の前後には改行が入る状態にする)。

その後にmagin: 0 auto;を記述します。marginに指定した数値の位置は記述した数で変わります。以下を覚えておくと便利。

{
//上下左右:0
margin: 0;
//上下:0 左右:auto
margin: 0 auto;
// 上:0 左右:1 下:2
margin: 0 1px 2px;
//上:0 右:1 下:2 左:3(時計周り)
margin: 0 1px 2px 3px;
}

要素の外側に余白を作るのがmargin、要素の内側に余白を作るのがpadingという違いはありますが、指定方法は両方とも同じです。

絶版後記

基本中の基本なのに間違えてることが結構あります(´・ω・)<修正せなー

javaScriptでmeta内のproperty属性から画像を取得する方法
「あみあみ」A8.netブックマークレット修正版【javaScriptの練習】

  • 【タグ】
便利&役立カテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる