DIV+CSS如何让文字垂直居中
CSS网页布局DIV水平居中的各种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如: imoker.cn(爱摩客)提供的代码片段:
1 div { 2 height:25px; 3 line-height:25px; 4 overflow:hidden; 5 }
这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。 imoker.cn(爱摩客)提供的代码片段不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。 二、多行未知高度文字的垂直居中 如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码: imoker.cn(爱摩客)提供的代码片段:
1 div { 2 padding:25px; 3 }
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 三、多行文本固定高度的居中
1 div#wrap { 2 height:400px; 3 display:table; 4 } 5 div#content { 6 vertical-align:middle; 7 display:table-cell; 8 border:1px solid #FF0099; 9 background-color:#FFCCFF; 10 width:760px; 11 }
这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法。 四、在Internet Explorer中的解决方案 在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:
1 <div id="wrap"> 2 <div id="subwrap"> 3 <div id="content"> 4 </div> 5 </div> 6 </div>
如果我们对subwrap进行了绝对定位,那么content也会继承了这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: imoker.cn(爱摩客)提供的代码片段:
1 div#wrap { 2 border:1px solid #FF0099; 3 4 width:760px; 5 height:400px; 6 position:relative; 7 } 8 div#subwrap { 9 position:absolute; 10 border:1px solid #000; 11 top:50%; 12 } 13 div#content { 14 border:1px solid #000; 15 position:relative; 16 top:-50%; 17 }
当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理,我也只是了解了一点皮毛,还要再研究) 五、完美的解决方案 那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:
1 div#wrap { 2 display:table; 3 border:1px solid #FF0099; 4 background-color:#FFCCFF; 5 width:760px; 6 height:400px; 7 _position:relative; 8 overflow:hidden; 9 } 10 div#subwrap { 11 vertical-align:middle; 12 display:table-cell; 13 _position:absolute; 14 _top:50%; 15 } 16 div#content { 17 _position:relative; 18 _top:-50%; 19 }
至此,一个完美的居中方案就产生了。
转载于:https://www.cnblogs.com/yuanqiao/p/4956614.html
DIV+CSS如何让文字垂直居中相关推荐
- css设置div内文字垂直,DIV+CSS如何让文字垂直居中?
满意答案 dinahcat 2016.05.08 采纳率:48% 等级:5 已帮助:205人 div+css实现文字垂直居中的五种方法: 1.把文字放到table中,用vertical-alig ...
- 【CSS基础】文字垂直居中
文字垂直居中 1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML <div class="father"><div ...
- html 如何把文字和图片放到一行,DIV+CSS图片和文字如何显示同一行
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div, ...
- div css每行文字显示一半 同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...
- css 输入框中文字水平居中,css水平居中,文字垂直居中
水平居中 定宽度+margin:top auto可以让一个块级别元素在外层居中 例如这样: 效果: 可以看到这个div已经居中了 但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的 ...
- html字段过长显示不全,div css最后一排文字字体显示一半显示不全
div css布局中DIV盒子里的最后一排笔墨字体展示一半浮现不全如何进行希图?梗概收尾一排文字内容赶过DIV边框,着末一排模式展现与潜伏如何控制和取舍的CSS组织. 这里CSS5为各人介绍结尾一排翰 ...
- html如何实现字体重叠,div css每行文字显示一半 同时文字字体重叠显示不全解决方法...
CSS DIV机关中泛起单行或多行笔墨的每行笔墨内容不克不及体现全,上上行笔墨有一点点堆叠景象,笔墨字体只闪现一半经管门径,在低版本IE分外明显笔墨字体表示不全,在google涉猎器等高版本IE阅读器 ...
- html代码消失一半,div css最后一排文字字体显示一半显示不全
div css机关中DIV盒子里的末了一排翰墨字体闪现一半展现不全若何发展方案?或许末端一排翰墨模式越过DIV边框,结尾一排模式显露与埋伏若何管教和弃取的CSS组织. 这里CSS5为各人简介结尾一排文 ...
- IE9不支持CSS line-height的文字垂直居中解决方法
IE9不支持line-height原因:中文ie9不支持英文字体 相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置字体有关,通常大家习惯设置font-fam ...
最新文章
- 关于学习Python之后的一点总结(1->符号优先级->for->range())
- bootstrapDialog插件集成datatables插件遇到的异常
- C#.NET 通用权限管理系统组件 大数据多表分页获取部分列的参考方法
- 大数据实训报告_2019公路货运大数据报告发布:运输结构持续优化 大数据优势愈发明显...
- eclipse怎么更改tomcat的上下文访问路径
- 微信开发系列之十 - 在SAP C4C接收微信发送过来的服务请求回应
- [NewLife.XCode]脏数据
- 2020蓝桥杯省赛---java---B---2(指数计算)
- GDB 调试程序 详解 使用实例
- 数据归一化 - MinMaxScaler()/MaxAbsScaler() - Python代码
- 微信小程序授权登录(获取微信头像并显示)
- php花店会员信息管理系统,PHP网上花店管理系统
- Java 计算月份天数
- 无人机加入海上搜救;信息检索一站式开发包;JAX 实现的模块化强化学习库;动物园实际场景多视数据集;前沿论文 | ShowMeAI资讯日报
- 苹果发布会总结:Mac 三产品线更新自研 M1 芯片,尝鲜只要 5299 元
- 《高等统计物理学》5:非平衡态统计物理初步
- 电容充放电时间的计算方法(重点是对于恒流充放电的常用公式:⊿Vc=I*⊿t/C,其出自公式:Vc=Q/C=I*t/C。)电荷泵(无电感)中电容恒流放电的滤波可以参考4-20毫安的采集中RC滤波电路
- 波长链(TRON)---发币
- Vue+bpmn.js自定义流程图之palette(二)
- 超详细的集合思维导图