外链论坛

 找回密码
 立即注册
搜索
查看: 102|回复: 1

3种实现CSS 上下居中的办法

[复制链接]

3026

主题

155

回帖

9923万

积分

论坛元老

Rank: 8Rank: 8

积分
99239027
发表于 2024-6-30 09:56:31 | 显示全部楼层 |阅读模式

<center>在CSS里欠好使了,在CSS里 处理上下居中问题又能支持both IE和Firefox的有3种方法:

第1种,上下居中文字:

办法运用line-height,由于line-height便是用来定义文字行与行之间的距离,因此定义文字框的line-height等于框的高度能够让文字上下居中.

h1 { font-size: 3em; height: 100px; }

必须重视的是:倘若中间的文字不只一行,并且运用分行表示的时候,这个就欠好用了。

第二种,非文字的上下居中:

运用absolute positioning,必须重视的是这个办法只能在框有定义好的高度才可工作. 不适合动态高度的框.

假如代码为:
Hi, ImVertically 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;}
回复

使用道具 举报

1

主题

956

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-9 15:09:07 | 显示全部楼层
哈哈、笑死我了、太搞笑了吧等。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 02:13 , Processed in 0.079367 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.