Sass 文字置中

文字絕對置中

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

Html

<div class='abs-text-center'>
  <h1>
    Hello World!
  </h1>
</div>

Scss

• 垂直置中：讓 height 跟 line-height 的高度相同。
• 水平置中：讓 text-align 為 center。

$box-height: 100px;

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

  text-align: center;
}

Preview

Hello World!

右側垂直置中

Scss

$box-height: 100px;

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

  text-align: center;

  float: right;
}

Hello World!

右側垂直置中與

同行

Html

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

Scss

$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

• Codepen