
HPB18　｜　HPB19	コンテンツ一覧

ホーム　＞　HPB19　＞　CSS スタイルシートを使って画像（IMG）を中央揃えにする方法

目次　｜　元のページ

前のページ　｜　次のページ

サイトマップ　｜　ページEND

CSS スタイルシートを使って画像（IMG）を中央揃えにする方法

CSS スタイルシートを使って画像（IMG）を中央揃えにする方法

スタイルシートで中央揃えのクラスを定義し、画像（IMG）に対してクラスを指定することにより、画像（IMG）等を中央揃えで表示する方法、記述の仕方について説明します

画像（IMG）を中央揃えにする為の　CSS スタイルシートの記述例書き方

CSS スタイルシートの記述例書き方

項目	内容
記述例	.cl_center{ display: block; margin-left: auto; margin-right: auto; } .cl_float_clear{ clear: both; }
説明	.cl_center　：　中央揃えの指定です　定義（クラス）名は自分で分かれば何でもＯＫです .cl_float_clear　：　「clear: both;」は中央揃えの指定を解除するための指定ですが、実用上、使用する必要はあまり無いかと思います

画像（IMG）を中央揃えにする「class」の記述例書き方

項目	内容
記述例	<img src="icon.jpg" class="cl_center">
説明	CSS スタイルシートファイルで中央揃えを定義したクラス名を「class="cl_center"」で指定します

display プロパティ

項目		内容
記述例		p {display: block}　／　span {display: inline}
値	block	p、div、ul、h1～h6などのタグの初期値あらかじめ、要素の幅が、表示エリアの横幅いっぱいまで確保され、複数記述すると、間に改行が入り、縦（下）に表示されていきます
	inline	a、span、omgなどのタグの初期値要素の幅は、表示に必要な幅しか確保されませんので、複数記述すると、横に並んで表示されます
	inline-block	block と inline の特徴を併せ持っており、block の特徴を持ちながら、横に並んで表示されます
	none	非表示になります（要素が表示されなくなります）

項目	内容
display:	block	inline-block	inline
複数要素配置時の改行と並び	自動的に改行され、縦（下）に並びます	横に並びます	横に並びます
幅（width）・高さ（height）の指定	可	可	不可
余白（margin ・ padding）の指定	可	可	左右は可上下は不可
横方向のテキストの揃え位置（text-align）の指定	不可	可（親要素に対して指定する）	可（親要素に対して指定する）
縦方向のテキストの揃え位置（vertical-align）の指定	不可	可	可

※．スタイルシートの呼び出し方については、「スタイルシート（ CSS ）とは」をご参照下さい


目次　｜　元のページ	前のページ　｜　次のページ	サイトマップ　｜　ページTOP

ホーム　＞　HPB19　＞　CSS スタイルシートを使って画像（IMG）を中央揃えにする方法


HPB18　｜　HPB19	コンテンツ一覧



	© 2014 abhp.net All Rights Reserved.

参考情報

【CSS】スタイルシートを使って画像（IMG）を中央揃えにする方法。