可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法

2014.08.31 2018.02.13HTML/CSS
可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法

ブロック要素を中央寄せする場合、その要素の幅とマージンを指定します。

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS


.parent {
width: 100%;
}
.child {
width: 300px;
margin: 0 auto;
}

しかしこの方法は、あらかじめ幅を指定しておくことが難しい場合には使えません。ということで、今回は可変幅のブロック要素を中央寄せする方法をご紹介します。

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS

.parent {
text-align: center;
}
.child {
display: inline-block;
}

クラス名「child」のブロック要素にインライン要素の性質を持たせ、その親となるブロック要素「parent」にインライン要素を中央寄せするための「text-align: center;」を指定します。

こちらの記事を参考にさせて頂きました。現在では必要があるか分かりませんが、リンク先ではIE7以下への対応方法も説明されているので興味あったら見てみてください。それでは。


<追記>

display:flexを使うことで、より簡単に同様のことができます。下記のページで方法をご紹介していますので、よかったら見てみてください。

→ display:flexを使って可変幅のブロック要素を中央寄せする方法


WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら