我们都知道,对于一行文本的垂直居中可以通过设置 height 与 line-height 值相等来实现。

那么对于两个嵌套的div ,或者一个div中的多行文本,怎么让被包含的部分实现垂直居中呢?显然,通过 line-height 没法实现。

其实,实现原理就是用外层div的高度减去内层 div 的高度,除以2之后,给内层div设置margin-top值就可以了。

假如页面上内层div的高度是由内容撑开的,这时就需要用js了。通过动态获取内层div的高度,再依照上述原理去实现。

垂直居中问题不只有 line-height 可以解决,还有一个哥们叫 margin-top的更多相关文章

  1. 意外地解决了一个WPF布局问题

    原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...

  2. 解决由于一个软件限制策略的阻止,windows无法运行此程序cmd.reg

    解决由于一个软件限制策略的阻止,windows无法运行此程序cmd.reg Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFT ...

  3. 花了5天时间,终于解决了一个bug,心情非常愉快,憋了这么久,不吐不快

    http://www.cnweblog.com/fly2700/archive/2011/12/06/318916.html (转载) 花了5天时间,终于解决了一个bug,心情非常愉快,憋了这么久,不 ...

  4. 安卓移动端line-height垂直居中出现偏移的原因,及解决方法

    目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的.出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的. 左图中的字号是12px,右图中的 ...

  5. IE中出现 "Stack overflow at line" 错误的解决方法

    在做网站时遇到一个问题,网站用的以前的程序,在没有改过什么程序的情况下,页面总是提示Stack overflow at line 0的错误,而以前的网站都正常没有出现过这种情况,在网上找了一下解决办法 ...

  6. Multiple markers at this line @Override的解决方法

    Multiple markers at this line - implements java.awt.event.ActionListener.actionPerformed - The metho ...

  7. 报错compile_str() flow.php on line 375的解决方法

    flow.php line 375,flow.php  找到375行: * 保存收货人信息 */ $consignee = array( 'address_id' => empty($_POST ...

  8. 去除外显子低质量reads时弹出错误“Invalid quality score value (char '#' ord 35 quality value -29) on line 4”和“Invalid quality score value (char '.' ord 46 quality value -18) on line 12”的解决方法

    楼主跑以下程序时分别弹出了“fastq_quality_filter: Invalid quality score value (char '.' ord 46 quality value -18) ...

  9. PHP Warning: Module 'modulename' already loaded in Unknown on line 0 的解决方法

    今天无间断服务加载php-fpm时,爆出了一个错误:PHP Warning:  Module 'xhprof' already loaded in Unknown on line 0 <br / ...

随机推荐

  1. scvmm2008 错误 2941 0x80072efe

    该错误是由于vmm和主机之间的证书不匹配所导致的. 1. 运行mmc,文件=>添加管理单元=>添加证书=>计算机账户=>本地计算机. 2. 在下图各个目录证书下删除和vmm关联 ...

  2. [respberry pi3][suse] 配置docker

    [respberry pi3][suse] 配置docker arm64 suse上总的软件还是比较少的,特别是对32bit的一些支持,比较熟悉ubuntu,但是不能raspberry pi3没有64 ...

  3. 什么是C#?什么是.NET Framework?

    1.什么是C#: 解1:C#就是一门开发语言,是由C及C++演变而来的,有朋友戏称之为"C四个+",这里的"#"号,不读"井",而读做&qu ...

  4. PostgreSQL按年月日分组

    Select EXTRACT(year from cast(joindate as timestamp)) as Year, EXTRACT(month from cast(joindate as t ...

  5. ZKEACMS 如何使用组件自定义样式/编辑样式

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  6. C# Log4.Net日志组件的应用系列(一)

    引言 Log4Net应该可以说是.NET中最流行的开源日志组件了.在各种项目框架中可以说是必不可少的组成部分.个人认为Log4Net有下面几个优点: 1. 使用灵活,它可以将日志分不同的等级,以不同的 ...

  7. 【QTP小技巧】02_QTP中Complete Word 实现(转载)

    相信做过开发或者写过JAVA的朋友都应该对Complete Word这个词语不陌生吧~ 对~~~它就是开发脚本过程中的催化剂 有了它我们就可以不用去死记硬背 有了它我们就不会出现某个代码少一个字母 有 ...

  8. chipmunk 物理引擎的基本概念和基本用法

    chipmunk是一个开源2D物理引擎, 项目主页:http://code.google.com/p/chipmunk-physics/ 工作需要研究了一下,这个引擎的资料还是不多,我阅读了所有的文档 ...

  9. Java面向对象之异常(自定义异常)

    一.基础概念 在自定义的程序中,如果有了问题.也可以像java中的异常一样,对问题进行描述. 注意:1.继承RuntimeException的异常,不需要进行处理.在执行过程中有异常会直接抛出. 2. ...

  10. 淘宝内部分享:MySQL & MariaDB性能优化 【转】

    MySQL· 5.7优化·Metadata Lock子系统的优化 背景 引入MDL锁的目的,最初是为了解决著名的bug#989,在MySQL 5.1及之前的版本,事务执行过程中并不维护涉及到的所有表的 ...