html信息登录居中右对齐,HTML的居中对齐

本文详细介绍了CSS中实现元素居中对齐的三种常见方法:1. 使用`text-align:center;`适用于内联元素和普通文本;2. 通过设置`margin: 0 auto;`使块状元素在容器中水平居中;3. 结合`line-height`与`height`实现文本在块状元素内的垂直居中。通过实例解析,帮助理解各种情况下的居中技巧。
摘要由CSDN通过智能技术生成

一、下图给出一个大的容器(相当于浏览器窗口),里面有3个元素,如何实现三种不同的居中?

32fc17af1a1086a5c52f2f85466b23d3.png

居中结果:

543ea830f022d2bb6b5a3585186cbb19.png

二、居中对齐分类

1. text-align: center;  (最常见)

2. margin: 0 auto;

3. line-weight: H(所在容器的高度)

三、个个击破

1. text-align: center;

对于普通文本、内联元素有用

可以实现容器中“居中对齐1”,在容器中的居中。

2. margin: 0 auto;(暂且将包裹“居中对齐3”的叫居中对齐2)

对于块状元素有用

“居中对齐2”为块状元素,让其左右外边距为“auto”,那么左右就默认相等、且在容器中居中

其上下外边距可以任意设定。

3.line-weight:H(所在容器的高度)

对于块状元素中的文本有用

“居中对齐3”文本在“居中对齐2”块状元素当中,当文本的行高=H(居中对齐2的高度时),

文本就在上下方向上居中了,如果你想再实现左右方向居中的话,text-align: center;就

可以解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值