如何让图片在垂直方向与 div的底部对齐 水平居中

本文将介绍如何利用CSS中的position属性实现元素的绝对定位,包括如何使用div作为辅助容器来精确控制图片等元素的位置,如垂直方向与div底部对齐、水平居中等。通过实例演示了如何通过position定位实现复杂布局效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要图片的绝对定位postion: absolute.

一般定位时, 是用div去定位.

一般不直接用 非div去"绝对/相对"定位. 如不直接用

  1. 等去定位. 因为这些好像不好定位.

也就说, 定位时, 用div去做定位, 然后把真正要定位的内容 放在 "辅助定位"的 div中去.

然后, 再在 定位的div中, 去设置其中包含的内容的 水平对齐等方式.

因此, 有这样的思路, 如果 要求 某个 元素 脱离其正常的排列 位置, 要 "定位"在某个特殊的位置, 就应该想到 postion定位.

"position"定位, 理解这个含义: 就是为了使 元素 定位到其 非正常 排列的位置".

比如:
让图片在垂直方向与 div的底部对齐 水平居中?

让你的图片浮动。然后给他个bottom:0;

<div style="position:relative;height:100px;width:100px;border:1px solid red">

    <div style="width:100px;position:absolute; bottom:0;left:0; text-align:center;">
    
        <img src="***.gif" width="20" height="20">
    </div> 

</div>

转载于:https://www.cnblogs.com/bkylee/p/5361122.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值