2016年11月30日 星期三

css文字垂直置中簡易方法

單行文字

.text {
  height: 26px;
  line-height: 26px;
}

多行文字


放置文字的區塊.box
區塊內要置中的內文.text

*{margin:0;padding:0;}

.box{
  height:200px;
  width:300px;
  background:pink;
  margin:30px auto;
  font-size:0;
}
.box:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.text{
  display: inline-block;
  font-size:16px;
  vertical-align: middle;
}

css使用flexbox處理垂直居中的版面

沒有留言: