谦谦君子
谦谦君子 提问于
2018-12-22  ·  1866 次阅读

css 如何设置图片 img 居中显示

已解决 css
0

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

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

但是这样一来，div 中的文字也居中了，这不是我想要的效果。

image-center.jpg

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

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

请问，有没有办法在 img 中设置属性，不在 div 中设置 text-align:center，使得这个 img 居中？测试过了，不可以使用 margin:0 auto。

<div style="width:600px;heigth:800px;border:2px solid red">
    <p>前置文字。</p>
    <img src="https://s25.postimg.org/8nw251b8f/timg.jpg" style="width:200px;height:200px;display:inline-block;margin:0 auto">
    <p>后置文字。</p>
</div>
举报
如果觉得这对你有用，请随意赞赏，给与作者支持
本站文章除注明转载外，均为本站原创或编译。转载请征得作者同意，并务必注明出处。
转载请注明：文章转载自 代码饭社区 [https://www.daimafans.com]
回答 (2)
2 个回答
0

已采纳

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

这么写，

<div style="width:600px;heigth:800px;border:2px solid red;">
    <p>前置文字。</p>
    <img src="timg.jpeg" style="width:200px;height:200px;display:block;margin:0 auto;">
    <p>后置文字。</p>
</div>

div-img-margin-auto.jpg

0

text-align:center 这个属性作用的对象的是父层下面的子元素的居中对齐，如果你用 text-align:center 让 img 直接居中的话，因为没有参考的对象，他无法使用这个属性来决定怎么居中，位置该怎么放？

你可以使用 margin 来实现居中。