The current article

枠内で画像のサイズに合わせて上下左右中央揃えするCSS

縦横比を変えずに要素内に収め、余白ができれば上下左右中央揃えにしたい時に使えるCSSの記述方法です。
備忘録を兼ねてご紹介いたします。

vertical

capture

同じ比率の横画像ばっかりなんてこと少ないですよね・・・
このCSSを使うと、要素より大きい画像なら、縦、横、長いほうが要素いっぱいに収まり、比率を合わせて短い方も縮小され、余白ができれば縦横中央に整います。
要素より小さい画像は、もちろんそのまま中央に配置されます。

クライアントに画像投稿してもらう時(どデカい画像はやめて~)など重宝します。

以下、参考タグです。

HTML記述例

<div class="centered">
	<div>
		<img class="adapt" alt="" src="image.png">
	</div>
</div>

3行目の「img」に「adapt」というクラスを付けるのを忘れずにー

CSS記述例

.centered {
    border: 1px solid #ccc;
    display: table;
    height: 100px;
    width: 150px;
}
.centered > div {
    display: table-cell;
    vertical-align: middle;
}
img.adapt {
    display: block;
    margin: 0 auto;
    max-height: 100px;
    max-width: 150px;
}

「display: table-cell;」を使った書き方で、th や td と同じ性質を持たせて「vertical-align: middle;」を効かせています。
4行目・14行目の高さと
5行目・15行目の幅は、同じ大きさにして適宜変更すると良いと思いますー


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。