html - img如何居中

问题描述

问 题

在div中写入 text-align:center 里面的img可以居中

<div style="width:600px;heigth:800px;border:2px solid red;text-align:center">
<img src="timg.jpeg" style="width:200px;height:200px;">
</div>

我想在img中设置属性，这样设置不行

<div style="width:600px;heigth:800px;border:2px solid red">
<img src="timg.jpeg" style="width:200px;height:200px;display:inline-block;text-align:center">
</div>

请问，有无办法在img中设置属性，不在div中设置text-align:center  ，使得这个img居中？

测试过了，不可以使用;margin:0 auto

<div style="width:600px;heigth:800px;border:2px solid red">
<img src="https://s25.postimg.org/8nw251b8f/timg.jpg" style="width:200px;height:200px;display:inline-block;margin:0 auto">
</div>

解决方案

img的样式应该为width:200px;height:200px;display:block;margin:0 auto;
img是个特殊的内联元素。可以设置长宽，跟button类似。margin:0 auto居中只能于作用块级元素。故img设置了display:block;margin:0 auto即可居中

这篇关于html - img如何居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！