テキストを上下で中央揃えする方法
テキストを上下で中央揃えしたい場合、heightとline-heightに同じ高さを指定しましょう。
サンプルコード
line-heightは1行の高さを表します。これを要素の高さと同じにすることで、テキストを上下で中央に揃えられます。
div {
height: 50px ;
line-height: 50px ;
}デモ
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid #000 ;
height: 150px ;
line-height: 150px ;
}
</style>
</head>
<body>
<div>SYNCER</div>
</body>
</html>関連記事
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- pre要素で折り返し改行させる方法
- pre要素で折り返し改行するには、white-spaceプロパティにpre-wrapを指定します。
- 表示されるタブの幅を変更する方法
- 表示されるタブの幅を指定するには、tab-sizeプロパティを利用します。
- 文字の太さを変更する方法
- 文字の太さを変更するには、font-weightプロパティを利用します。
- type=rangeのinput要素を上下揃えする方法
- rangeの入力フォームを上下揃えするには、vertical-alignプロパティにmiddleを指定します。