CSSで文字を縦書きにした後, 左右中央に揃える(中心、真ん中に寄せる方法)

2019.06.19 / 更新日：2019.06.26

困ってる人

CSSで文字を縦に並べる方法が知りたい
縦に並べた文字を、左右中央に寄せる方法も知りたい

かしこまりました。それでは文字を縦並びにする場合は、writing-mode: vertical-rl; を使ってみましょう。

オペレーター

こんにちは、よろと申します。

という事で今回は、CSSで縦並びにした文章や文字を、

左右中心に寄せる方法という事で、実際にやってみるとこんな感じ。

CSSで文字を縦書きにした後, 左右中央に揃える(中心、真ん中に寄せる方法)

まず、文字を縦並びにする方法は、親要素にこれ、

writing-mode: vertical-rl;

そして、これらを左右中心(真ん中)に設置する方法は、

親要素に、position: relative;

そして子要素に、

// 縦並びにした文字を左右中央に寄せる

position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

// 縦並びにした文字を左右中央に寄せる

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

実際のHTMLとCSSはこんな感じで、クラス名は適当 ↓

・index.html

// index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">

    <title>縦並びにした文字を左右中央に</title>
</head>

<body>
    <div class="txt">
        <div class="txt-wrapper"><p>テキスト</p><p>テキスト</p></div>
    </div>
</body>

</html>

// index.html

<!DOCTYPE html>

<head>

<title>縦並びにした文字を左右中央に</title>

</head>

<body>

</div>

</body>

</html>

・style.css

// style.css

.txt {
    position: relative;
    width: 300px;
    height: 300px;
    writing-mode: vertical-rl; /* ここで縦書きに */
    border: 4px solid #000;
}

.txt-wrapper { /* 文字を左右中央に寄せる */
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

// style.css

.txt {

position: relative;

width: 300px;

height: 300px;

writing-mode: vertical-rl; /* ここで縦書きに */

border: 4px solid #000;

}

.txt-wrapper { /* 文字を左右中央に寄せる */

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

}

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール