美文网首页
css实现文本水平垂直居中

css实现文本水平垂直居中

作者: 心斐 | 来源:发表于2018-08-02 18:20 被阅读0次
效果图

兼容性

兼容IE8及以上


核心代码

#my-style a {
  /* Box-model */
  display: table-cell;
  padding-left: 28px;
  padding-right: 28px;
  height: 90px;
  /* Typography */
  text-align: center;
  vertical-align: middle;
  overflow-y: hidden;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  transition: all .3s;
}

源码

点我查看实例


当然,文本过多的时候,我们也可以去掉 滚动条,可以后续探讨。

相关文章

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • css 实现水平居中的方法总结

    css 实现水平居中,垂直居中,水平垂直居中,是css 入门的必修课题,也是代码实践,笔试面试中经常遇到的场景。这...

  • css实现文本水平垂直居中

    兼容性 兼容IE8及以上 核心代码 源码 点我查看实例 当然,文本过多的时候,我们也可以去掉 滚动条,可以后续探讨。

  • css居中完全指北

    css的水平垂直居中问题太常见了,整理一波 行内单行文本 行内元素的水平居中比较常见 行内元素多行文本的垂直居中,...

  • 动态设置div css属性

    jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取D...

  • margin负值应用实例

    1. 水平垂直居中 利用margin负值可以实现元素的水平垂直居中 html代码: CSS代码 实现效果 2. 列...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • 2018-09-26

    转载:CSS实现水平垂直居中的10种方式

  • 关于react-native text 水平垂直居中问题

    为了实现text文本居中,原本在android 上开发以下的css样式是ok的 但在ios上只有水平居中,没有垂直...

网友评论

      本文标题:css实现文本水平垂直居中

      本文链接:https://www.haomeiwen.com/subject/tzssvftx.html