1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ボックス内の縦横中央に程よく文字を配置する

Posted at

小ネタです。

スクリーンショット 2016-11-23 11.53.44.png

こんなの作ってくれ、て言われたとき。いきなり回答ですが。

sample.jade
.centered そんなに
style.styl
.centered
  border 1px solid  #333
  width 100px
  height 100px
  display table-cell
  vertical-align middle
  text-align center
  box-sizing border-box
  line-height 2
  font-size 14px
  // 中央にずらす
  letter-spacing s = 1.5em
  padding-left s // letter-spacing = padding-left

letter-spacingとpadding-leftを同じ数値にするといい感じになります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?