WEB制作(html・css(スタイルシート))に関する各種メモ書き

横幅指定せずに(サイズが可変な)DIVをセンタリングするCSS

一般的には<DIV>をセンタリングするには `margin: 0 auto; width:500px;` というふうに


##■ ページネーションなどサイズが可変なDIVをセンタリングするには
```
<div class="pagination_block">
	<div class="pagination">
		<a href="#">1</a>
		<strong>2</strong>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
</div>
```
```
. pagination_block {
	text-align: center;
	font-size:0;
}
. pagination {
	display: inline-block;
}
```
とやればOKです。
親要素のスタイル ``` font-size:0; ``` で余計な隙間を作らないようにしています。


## ■ インラインブロック(display: inline-block;) 要素とは?
「ブロック要素」は上から下に並びますが「インラインブロック要素」は横に並びます。
画像ファイル<img>タグをイメージするとわかりやすいでしょう。  
以下の様な特徴があります。

- margin , padding を上下左右に指定できる。
- width , height を指定することができる。
- vertical-align を指定することができる。
- 親ブロックのtext-align が有効。

です。

関連エントリー

No.962
12/21 14:40

edit

css