外链论坛

 找回密码
 立即注册
搜索
查看: 100|回复: 4

CSS中居中对齐元素的办法

[复制链接]

3069

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158935
发表于 2024-6-30 09:51:36 | 显示全部楼层 |阅读模式

文字

text-align属性功效于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。

p { text-align: center; }

inline-block元素

平常的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素同样,是能够在一行中连续摆列的。令inline-block元素居中的第1步是将其转化为block元素,即保准一行仅有这一个元素。

运用display属性将inline-block转化为block。
img { display: block; }

2. 接下来的过程和block元素同样

block元素

平常的block对象是<p>, <div>, <section>。

办法1:将margin属性设为auto

下面两种写法的效果是同样的。写法1是一次性把margin的四个方向都设置了。倘若用写法2的话,能够把margin-top和margin-bottom设成其他数值。

div { /* 写法1 */ margin: auto; /* 写法2 */ margin-right: auto; margin-left: auto; }

margin: auto 只能实现水平居中,不可垂直居中。由于margin-top和margin-bottom的属性为auto时,实质便是顶端对齐。

办法2:用百分数暗示width, margin

一个元素的范围由margin, border, padding, content(中心内容)构成。方便起见,把border和padding都设为0,而后必须调节content的width和margin就能够实现水平居中了。

水平居中原则:margin的百分数 x 2 + width的百分数 = 100%

水平居中示例代码效果
#parent { /* 黑色区域 */ width: 100px; height: 100px; bac公斤round-color: #000; } #child { /* 灰色区域 */ bac公斤round-color: #ddd; height: 100px; width: 20%; margin-left: 40%; margin-right: 40%; }

然则倘若想用类似的垂直居中原则(margin的百分数 x 2 + height的百分数 = 100%)的话,效果就不对了。div#child的高度、上下边距虽然都是咱们想要的数值,然则div#child的上边距超出了div#parent的范围。div#child仍然保持和div#parent的顶端对齐。因此,用百分数暗示width, margin的办法只适用于水平居中。

垂直居中示例代码效果




上一篇:CSS实现居中对齐
下一篇:css学习之路(1)-居中的几种办法
回复

使用道具 举报

1

主题

826

回帖

-1

积分

限制会员

积分
-1
发表于 2024-8-20 07:40:34 | 显示全部楼层
软文发布平台 http://www.fok120.com/
回复

使用道具 举报

3132

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968646
发表于 2024-10-4 02:12:08 | 显示全部楼层
外链发布论坛学习网络优化SEO。
回复

使用道具 举报

2994

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109202
发表于 2024-10-13 04:27:45 | 显示全部楼层
软文发布论坛开幕式圆满成功。 http://www.fok120.com
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 6 天前 | 显示全部楼层
对于这个问题,我有不同的看法...
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 16:43 , Processed in 0.126157 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.