热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS设置多行文本垂直居中的方法

单行文本居中比较简单,就是将line-height设置成和height一样就可以了,但是对于多行文本,这种方式就行不通了,除了第一行,下面的就都看不到了。多行文本垂直居中的CSS需要这么设置:复制代码代码如下:*多行居中对齐的方法,width,height必须使
单行文本居中比较简单,就是将line-height设置成和height一样就可以了,但是对于多行文本,这种方式就行不通了,除了第一行,下面的就都看不到了。

多行文本垂直居中的CSS需要这么设置:

代码如下:

/*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/
.vcenter
{
width: 100px; height: 102px; vertical-align: middle; display: table-cell; overflow: hidden;
}

如果这个div必须浮动,那么可以在里面再嵌套一个div。这种方法有一个问题,就是width和height必须固定,否则无法实现居中。
父div再设置一个display: table的属性。这种方法还有一个问题,就是overflow属性不起作用了,这就是把div设置成table-cell的后果,所以如果要实现overflow:hidden,还需要在里面设置一个div,单独设置overflow:hidden的属性。
推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • CSS3 animation动画属性详解及用法
    本文详细介绍了CSS3 animation动画的各种属性及用法,包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习,读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术,避免使用内联样式和固定定位,实现了一个标准的页眉页脚布局。提供了一个替代的解决方案,为读者提供了参考。 ... [详细]
  • Java源代码安全审计(二):使用Fortify-sca工具进行maven项目安全审计
    本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践,记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程,包括clean、build、Analyze和Report。在安装mvn后,作者遇到了一些错误,并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验,并成功进行了mvn install。 ... [详细]
  • 本文介绍了CSS样式属性text-overflow、overflow、white-space、width的使用方法和效果。通过设置这些属性,可以实现文本溢出省略号、隐藏溢出内容、禁止换行以及限制元素宽度等效果。详细讲解了每个属性的作用和用法,以及常见的应用场景和注意事项。对于前端开发者来说,掌握这些CSS样式属性的使用方法,能够更好地实现页面布局和文本显示效果。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 标题: ... [详细]
  • 先看官方文档TheJavaTutorialshavebeenwrittenforJDK8.Examplesandpracticesdescribedinthispagedontta ... [详细]
  • 重入锁(ReentrantLock)学习及实现原理
    本文介绍了重入锁(ReentrantLock)的学习及实现原理。在学习synchronized的基础上,重入锁提供了更多的灵活性和功能。文章详细介绍了重入锁的特性、使用方法和实现原理,并提供了类图和测试代码供读者参考。重入锁支持重入和公平与非公平两种实现方式,通过对比和分析,读者可以更好地理解和应用重入锁。 ... [详细]
  • Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份,pg_restore命令进行恢复,并设置-h localhost选项,可以完成数据的备份和恢复操作。此外,本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • 本文整理了Java中java.lang.NoSuchMethodError.getMessage()方法的一些代码示例,展示了NoSuchMethodErr ... [详细]
  • 本文整理了Java中com.evernote.android.job.JobRequest.getTransientExtras()方法的一些代码示例,展示了 ... [详细]
  • 本文整理了Java中org.apache.solr.common.SolrDocument.setField()方法的一些代码示例,展示了SolrDocum ... [详细]
author-avatar
mobiledu2502890617
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有