图片居中怎么设置 css
2个回答
展开全部
1、首先先在页面里加载一张图片，代码和效果如下图所示：
2、然后设置给图片起一个class名，方便一会儿的操作。
3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。
6、最后给大家附上全部的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用CSS让图片水平垂直居中</title>
</head>
<body>
<img class="pic" src="img/timg.jpg" alt="" />
</body>
<style type="text/css">
.pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2022-10-09 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
(最简单)文本属性对齐text-align text-align控制元素中文本行的对齐方式。可以在img设一个父辈的div,这样img就可以是di...
巧用margin 以上三点缺一不可。 margin: 0 auto;居中的前提是: 内行元素必须要设置成display: block; img是行...
弹性盒布局 弹性盒布局可以使用少数几行css实现几乎所有的布局。而且最神的是,即便是n个图片上面两行都可以实现居中,而不必考虑图片布局和位置。
栅格布局 弹性盒用在导航栏是最普遍的。与之相比,栅格布局是普适的布局系统。 所以能够非常方便的处理多张图片对齐的问题。
巧用margin 以上三点缺一不可。 margin: 0 auto;居中的前提是: 内行元素必须要设置成display: block; img是行...
弹性盒布局 弹性盒布局可以使用少数几行css实现几乎所有的布局。而且最神的是,即便是n个图片上面两行都可以实现居中,而不必考虑图片布局和位置。
栅格布局 弹性盒用在导航栏是最普遍的。与之相比,栅格布局是普适的布局系统。 所以能够非常方便的处理多张图片对齐的问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
