外链论坛

 找回密码
 立即注册
搜索
查看: 130|回复: 0

CSS实现居中对齐

[复制链接]

2942

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109397
发表于 2024-6-30 09:50:23 | 显示全部楼层 |阅读模式

CSS 能够说是所有Web应用的“脸面”,因此呢用好CSS这门利器,能够提高网站的颜值。而CSS中水平居中和垂直居中是咱们学习和工作中经常用到的,因此我在这儿和大众聊一聊居中的几种实现方式。

1、水平居中

文字和照片等行内元素想实现水平居中,能够在父容器上添加text-align属性,就可实现容器内部的文字和照片居中水平对齐
#parent { text-align: center; }
固定体积的块级容器想实现水平居中对齐,可采用如下方法

方法1、运用margin: auto;

#parent { bac公斤round-color: lightgrey; width: 300px; height: 300px; } #child { bac公斤round-color: black; width: 160px; height: 160px; margin: 0px auto; }
margin: auto属性

方法2、运用css3的calc属性

#parent { bac公斤round-color: lightgrey; width: 300px; height: 300px; } #child { bac公斤round-color: black; width: 160px; height: 160px; /* 下面的160px是当前容器宽度 */ margin-left: calc(50% - 160px / 2) }
css3的calc属性自适应宽度的容器想实现水平居中

方法1、运用css3的transform向左偏移就可实现,代码中的margin-left能够运用相对定位实现距离左边50%的距离

#parent { bac公斤round-color: lightgrey; width: 300px; height: 300px; } #child { bac公斤round-color: black; height: 160px; margin-left: 50%; transform: translateX(-50%); }

html代码片段:

<div id="parent"> <!-- 此处运用行内样式,仅仅用于举例div不定宽 --> <div id="child" style="width: 160px;"></div> </div>
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-9 10:43 , Processed in 0.072655 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.