当前位置: 代码迷 >> Web前端 >> 文字实现水准垂直居中
  详细解决方案

文字实现水准垂直居中

热度:426   发布时间:2014-01-19 01:28:51.0
文字实现水平垂直居中
文字实现水平垂直居中的关键代码:

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;

由于flexbox是CSS3的一个新属性,目前支持的浏览器仅:IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。其他实现方法,大家感兴趣可以参阅:《CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章。

如需转载烦请注明出处:http://www.w3cplus.com/codes/vertically-center-content-with-css3.html

  相关解决方案