はじめに
htmlで文字を中央寄せとか左右に移動できないんですが、どうしたらいいんですか
htmlで文字を中央寄せなどを行う場合は、cssでtext-alignを使用します。
cssのtext-alignを使えばできるんですね。
ではサンプルと合わせてご紹介してきましょう。
文字を中央寄せ、左右に寄せてみよう
cssのtext-alingを使って文字を中央寄せ、左右に移動させて見ましょう。
サンプルコード
HTML
<head>
<title>テキスト文字を中央、左右に寄せよう</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="left">cssのtext-alignで左に寄せます</div>
<div class="center">cssのtext-alignで中央に寄せます</div>
<div class="right">cssのtext-alignで右に寄せます</div>
</body>
</html>
CSS
.left{
text-align:left;
}
.center{
text-align:center;
}
.right{
text-align:right;
}
サンプルコードの実行例
cssのtext-alignで左に寄せます
cssのtext-alignで中央に寄せます
cssのtext-alignで右に寄せます
このように、文字を中央、左右に移動することができます。
