51无敌兔
51福利网各种薅羊毛福利网赚分享平台

如何将图片放在div的底部?各种css汇总

1.如何将图片放在div的底部?

在包装的div标签上添加相对位置,然后将图像绝对定位在其中,如下所示:

51福利网

CSS:

代码:

.div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML:

<div class="div-wrapper">
    <img src="blah.png"/>
</div>

2.css实现图片居中于屏幕

css实现图片居中于屏幕,源码如下:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:100px;
  height:100px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.div{
   width:100%;
	 position:absolute;
	 top:0;
	bottom:0;
   background:#f00

}
body{
 margin:0;
	padding:0;

}
</style>
</head>

<body>
<div class="div">
	<img src="/images/online_demo/smiley.gif" class="center">
</div>
</body>

</html>

更多参考:完美解决HTML中footer保持在页面底部问题

文章地址:https://blog.csdn.net/m0_38099607/article/details/71598423

赞(0) 打赏
51福利网薅羊毛福利具有时效性,如有失效,请留言
文章名称:《如何将图片放在div的底部?各种css汇总》-51福利网
文章链接:https://www.51wuditu.com/9787
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

Hi, 请登录     我要注册

51福利网最新最全薅羊毛,现金红包线报网

51联盟线报群赚钱·合作·帮助

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏