博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 上下居中3种方案
阅读量:6431 次
发布时间:2019-06-23

本文共 943 字,大约阅读时间需要 3 分钟。

 

在CSS里不好使了,在CSS里 解决上下居中问题又能支持both IE和Firefox的有3种方案:

第一种,上下居中文字:
方法是使用line-height,因为line-height就是用来定义文字行与行之间的距离,所以定义文字框的line-height等于框的高度可以让文字上下居中.

h1 {
font-size: 3em; height: 100px; line-height: 100px; } 需要注意的是:如果中间的文字不只一行,并且使用分行显示的时候,这个就不好用了.
第二种,非文字的上下居中:使用absolute positioning,需要注意的是这个方法只能在框有定义好的高度才能工作. 不适合动态高度的框.假如代码为:    Hi, I'mVertically Aligned    Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.        要上下居中 CSS编写为:      .vert {
width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; }上边的margin计算公式为: * Width of Element / 2 = Negative Left Margin * Height of Element / 2 = Negative Top Margin第三种方法: Content here#floater {
float:left; height:50%; margin-bottom:-120px;}#content {
clear:both; height:240px; position:relative;}

 

转载于:https://www.cnblogs.com/wifi/articles/2597508.html

你可能感兴趣的文章
第八节:Asp.Net Core整合Log4net
查看>>
报表选型应该知道的
查看>>
chrome禁用JS
查看>>
xp_instance_regwrite syntax
查看>>
4中IO模型介绍
查看>>
B.Icebound and Sequence
查看>>
如何去掉滚动条,
查看>>
字典的循环
查看>>
常用的日期工具类
查看>>
JSON解析
查看>>
单例模式为什么要使用静态成员变量
查看>>
iOS 报错 :Duplicate interface definition for class’*'
查看>>
输出一个字符串的全排列
查看>>
UNITY 带spriterender的对象导出为prefab时主贴图丢失的BUG
查看>>
U3D 代码自动化生成定制预置体的旋转问题
查看>>
js基础代码
查看>>
Android-GridView使用
查看>>
typescript
查看>>
【学习】java栈之 堆上分配和栈上分配
查看>>
安装wamp的方法及过程
查看>>