html图片如何居中对齐(图片居中css方法)

html图片如何居中对齐?css方法如下几种:

html图片如何居中对齐(图片居中css方法)

html图片如何居中对齐(图片居中css方法)

1、可以在img外建立div块状标签,然后对div设定宽度,将文件居中设置 margin:0 auto

1
2
3
<div style="width: 300px; margin: 0 auto;">
      <img src="img/1.jpg" alt="图片">
</div>

2、将图片设置为相对定位,然后对其以百分比的方式将其居中

1
2
3
4
5
img {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《html图片如何居中对齐(图片居中css方法)》
文章链接:https://www.vvso.cn/xlbk/20994.html
分享到: 更多 (0)

热门文章

评论 抢沙发

切换注册

登录

忘记密码 ?

切换登录

注册