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

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;
}