WEBの極み

WEB時代を生き残る情報とテクニック

*

CSS、bootstrapでのテキスト、ブロック要素の中央寄せの方法まとめ

      2016/09/25

CSSの場合

テキスト要素は
.css{
text-align: center;
}

テキスト

ではテキストがボックスの中央に配置される。この場合、画面に対してブロック要素は中央寄せされない。

画面に対して中央寄せしたい場合は、div要素をブロック要素にする。
.css{
display: block;
}

これに加えて左右のマージンを追加する。
.css{
display: block;
margin-left: auto;
margin-right: auto;
}

bootstrap3の場合

テキスト要素は
class=”text-center”

ブロック要素の場合は
class=”center-block”
を指定するだけでtext-align: center;が適用される。

class=”center-block”を指定することで、以下のCSSが適用される。
.center-block{
display: block;
margin-left: auto;
margin-right: auto;
}

右寄せする方法
テキスト要素は
.css{
text-align: right;
}

テキスト

ではテキストがボックスの右寄せに配置される。この場合、画面に対してブロック要素は右寄せされない。

画面に対して右寄せしたい場合は、div要素をブロック要素にする。
.css{
display: block;
}
これに加えて幅(width: )と左のマージン(margin-left: auto)を追加する。
.css{
display: block;
margin-left: auto;
width: 100px;
}

 - WEB