文本垂直居中的设置很不方便,除了设置行高还有其他方法吗?

文本垂直居中的设置很不方便,除了设置行高还有其他方法吗?

简单点的情况是可以设置行高来让这行字垂直居中。如果不止一行字,上下留白又比较多,那该怎么居中?http://img1.sycdn.imooc.com//climg/5e9d5002099711f102300124.jpg有没有什么比较大众化、标准可靠的方法?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好:如果是多行需要垂直居中可以通过以下代码实现,其中,div中的height和line-height属性一定要保持一致。

http://img1.sycdn.imooc.com//climg/5e9d633809d1fea804570553.jpg

结果如下图:

http://img1.sycdn.imooc.com//climg/5e9d6346096797e501930122.jpg

如果解决了你的疑惑,请采纳,祝学习愉快~ 


  • 江民川 提问者 #1
    老师的讲解里我还是有几个问题: 一、inline-block我查了下是行内块状元素,但还是没懂这是什么意思。 二、可以看到<span>模块垂直居中是用vertical-align:middle,但水平居中用的是margin-left:75px,水平居中有没有像这个垂直居中一样的属性直接设置middle?
    2020-04-21 09:31:57
  • 江民川 提问者 #2
    inline-block意义是把整个<span>看作在<div>里的一行,所以在<div>里才把行高设置成与div高度一样。
    2020-04-21 09:49:17
  • 好帮手慕觉浅 回复 提问者 江民川 #3
    同学你好: 1.行内块状元素(如input、img)既具有 块状(block) 元素可以设置宽高的特性,同时又具有 行内(inline) 元素默认不换行的特性。而垂直对齐属性vertical-align只对设置了inline-block的元素有效,因此必须设置成行内块状元素再垂直对齐。 2.水平居中对齐可以用display:block;margin:0 auto;设置,但与垂直对齐相冲突,所以无法同时使用。 如果解决了你的疑惑,请采纳,祝学习愉快~ 
    2020-04-21 12:27:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.从网页搭建入门Python Web
  • 参与学习           人
  • 提交作业       218    份
  • 解答问题       3562    个

本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师