DIV

ブロックレベル要素

高さと横幅の指定：可能
高さの初期値：0
横幅の初期値：親要素の横幅(100％)
他要素との並び：改行される
余白：勝手につく場合がある
文字の位置：左上*[vertical-alignが効きません]

HTML

CSS

.test1{
background-color : #ffbbdd;
}
.test2{
background-color : #eeedb9
}

Demo

test1

test2

横並びにする

display : inline-block;では、<span>test3</span>と同じになります。
<span>ではできない高さを指定できます。

HTML

CSS

.test3{
background-color : #ffbbdd;
display : inline-block;
width : 100px;
height : 100px;
}
.test4{
background-color : #eeedb9
display : inline-block;
width : 50px;
height : 50px;
}

Demo

test3

test4

並べる

親要素の幅に収まらないものは、改行されます。
親要素に高さを指定していると、下方向へ親要素からはみ出します。
下のDemoでは親要素にpadding-bottom : 3remを指定しています。

HTML

CSS

.test3{
background-color : #ffbbdd;
display : inline-block;
width : 100px;
height : 100px;
}
.test4{
background-color : #eeedb9
display : inline-block;
width : 50px;
height : 50px;
}

Demo

中央によせる

親要素に文字の中央寄せがあれば中央になります。

HTML

CSS

.center{
text-align : center
}
.test3{
background-color : #ffbbdd;
display : inline-block;
width : 100px;
height : 100px;
}
.test4{
background-color : #eeedb9
display : inline-block;
width : 50px;
height : 50px;
}

Demo

test3

test4

vertical-align

右側のdivにverical-alignで下を設定。
左のdivに指定しても変化ありませんが、右に指定するとdiv自体が上、中央、下になります。

HTML

CSS

.center{
text-align : center
}
.test5{
background-color : #ffbbdd;
width : 100px;
height : 100px;
display : inline-block;
}
.test6{
background-color : #eeedb9;
width : 50px;
height : 50px;
display : inline-block;
vertical-align : bottom;
}

Demo

test5

test6

文字を上下中央

verical-alignを有効にするためには、親要素に「display : table」、子要素に「display : table-cell」にします。

親要素にサイズがある場合は、子要素にサイズを指定しても親要素のサイズが優先されます、子要素のサイズは親要素対してのに割合（％）になるようです。高さは大きい方に合わされます。

HTML

CSS

.cell1{
margin-left : auto;
margin-right : auto;
display : table;
}
.test8{
background-color : #ffbbdd;
width : 100px;
height : 100px;
display : table-cell;
text-align : center;
vertical-align : middle;
}
.test9{
background-color : #eeedb9;
width : 50px;
height : 50px;
display : table-cell;
text-align : center;
vertical-align : middle;
}

Demo

test8

test9

数を増やしてみた

Demo1はPCでは左右に余白が出ます、スマホ等ではDemo2と同じようになります。

Demo1

Demo2

Demo3

2
あいうえお

Demo4