div文字垂直居中

div文字垂直居中

1.单行文字

设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.

这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围.

插入代码:
div{

height: 20px;

line-height: 20px;

overflow: hidden;

}

2.多行文字

很简单,只要设定一样的 padding-bottom 和 padding-top 就可以了

插入代码:
div{

padding-top: 20px;

padding-bottom: 20px;

}

这种方法同时支持块级和内联极元素以及非文本内容,包括图片等等,也支持所有浏览器,不足的就是不能固定高度

现在比较好用的就着两种方法了,当然还可以利用浏览器的CSS hack,用得比较少,就不多讲了.

转载于:https://my.oschina.net/working/blog/139222

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110095.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python执行cmd命令并解析结果_python如何打包成可执行程序

    python执行cmd命令并解析结果_python如何打包成可执行程序身为一个编程小白,最近刚刚接手工作。近期在使用pyinstaller的时候,发现了一个很严重的问题,那就是缺少包。当时并不知道,因为代码已经是上任大佬写好的,我可以直接用。先说一下问题吧(图片忘了保存)。执行文件突然死掉,当时手速够快截了一个图。原因是缺少了这么个包。pkg_resources.py2_warn具体的解决方法如下:顺便说一下,pyinstaller的安装方法,很简单。首先打开你的pycharm,然后点击左下角的Terminal之后输入命令 pipinstallpyins

  • 用excel求逆矩阵只出现一个数字_求逆矩阵的方法公式

    用excel求逆矩阵只出现一个数字_求逆矩阵的方法公式 因为在YUV与RGB互相转换的时候用到了矩阵运算,当时正好需要求逆矩阵,而手头上没有matlab,所以只能考虑excel了。终于让我找到了方法,共享之:1)先将矩阵的数据输入,然后将所输入的数据选中(注意:只能是N*N的矩阵),然后点击插入-名称-定义,给这个矩阵取个名字MatrixA,然后点击确定。2)再选择N*N个格,在上面的输入框内写入“=MINVERSE(MatrixA)”,

  • c#数组与集合_将数组a和数组b合并为数组c

    c#数组与集合_将数组a和数组b合并为数组cc#数组与集合

  • django drf_mnbkdrf

    django drf_mnbkdrf前言我们上篇文章使用到了Serializer类,可能有小伙伴说太过复杂,那么本篇就为大家带来更加简便的序列化类ModelSerializerModelSerializer先来看下ModelSer

  • Visual Studio安装SVN插件[通俗易懂]

    Visual Studio安装SVN插件[通俗易懂]在VS上安装SVN插件后,感觉VS的代码版本控制用起来也这么顺手。

    2022年10月10日
  • slam技术是什么_技术文小说

    slam技术是什么_技术文小说什么是SLAM?SLAM(simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建,或并发建图与定位。问题可以描述为:将一个机器人放入未知环境中的未知位置,是否有办法让机器人一边逐步描绘出此环境完全的地图,同时一边决定机器人应该往哪个方向行进。例如扫地机器人就是一个很典型的SLAM问题,所谓完全的地图(aconsistentmap)是指不受障碍行进到房间可进入.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号