• css

テキスト文字を中央、左右にcssで寄せよう

はじめに

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で右に寄せます

このように、文字を中央、左右に移動することができます。

関連記事

  1. CSSで文字の間隔を変更してみた

  2. CSS講座 – 文字の色を変えてみよう –

  3. 見出しの前に三角形をつけてみよう

  4. 画像をhoverして時にズームさせるcssを書こう

  5. cssで矢印を作ろう

  6. hoverした時に文字の間隔をつかってアニメーションしてみよう

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031
Translate »