Sass 文字置中

文字絕對置中

範例如下,div 內部的文字置中,h1 只有將字型放大的功能。

Html

1
2
3
4
5
<div class='abs-text-center'>
<h1>
Hello World!
</h1>
</div>

Scss

  • 垂直置中:讓 heightline-height 的高度相同。
  • 水平置中:讓 text-aligncenter
1
2
3
4
5
6
7
8
$box-height: 100px;

.abs-text-center {
height: $box-height;
line-height: $box-height;

text-align: center;
}

Preview

Hello World!

右側垂直置中

Scss

1
2
3
4
5
6
7
8
9
10
$box-height: 100px;

.text-center {
height: $box-height;
line-height: $box-height;

text-align: center;

float: right;
}
Hello World!

右側垂直置中與

同行

Html

1
2
3
4
<div class='inline-text-center'>
<h1>Hello World!</h1>
<span>Hi</span>
</div>

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$box-height: 100px;

.inline-text-center {
height: $box-height;
line-height: $box-height;
}

.inline-text-center > h1 {
display: inline-block;
}

.inline-text-center > span {
float: right;
}

Hello World!

Hi