【CSS】ボックス内のテキストを上下左右の中心に置く方法

かわんです。

HTMLとCSSで遊んでいます。

僕って、経験は10年以上あるのだけど、空白期間がかなり長いので、実質5年ほどです。

実は、過去にWebデザイナーとして働いていました。

実務経験ありです。なので、転職するならWebデザイナーかなぁという感じです。

さて、今回はボックス内のテキストを上下左右の中心に置く方法です。

とりあえずHTMLから。

<div class="img">
<p>image</p>
</div><!-- img -->

「.img」というクラスを割り当てています。複数で使うのでクラスとして指定。もし、1つしかない場合は、「id」を使います。

次にCSSです。

.img {
    background: #ccc;
    height: 300px;
    width: 100%;
    display: table;
    text-align: center;
}

background: #ccc; height: 300px; width: 100%;

上記3つはお好みで・・・。

そして、「display: table;」を指定。「text-align: center;」で横方向の中央に配置します。

次に、「p」に対して、CSSを割り当てます。

.img p {
    display: table-cell;
    vertical-align: middle;
}

これでボックス内で上下左右の中心にテキストを置くことが出来ました。

なお、皆さんの環境では上手くいかないかも知れません・・・。

その時はごめんなさい・・・。他サイト様の記事をチェックして下さい。

なお、見栄えが狂う場合があるので、バックアップを取ってから作業して下さい。

自己責任で試して下さいね。

おしまい。