CSS“inline-block”值不适用于图像[重复]答案

【问题标题】：CSS "inline-block" value not working with images [duplicate]CSS“inline-block”值不适用于图像[重复]
【发布时间】：2020-02-14 04:13:59
【问题描述】：

使用 CSS3 中的“inline-block”值，我试图将图像对齐到中心，但它没有对齐！

我也尝试过使用“block”值，但它仍然不起作用。是我的电脑吗？是浏览器吗？

.link-images-js{
    display: inline-block;
    text-align: center;
}

使用 Visual Studio Code，它不会检测到任何错误，与 NP++ 和 Sublime Text 3 相同。使用“inline-block”值，它已经工作过一次，但之后就没有工作了。有谁知道问题出在哪里？

【问题讨论】：

让文本居中对齐父元素
我认为你应该在 jsfiddle 中创建一个模型以便我们看到，因为不清楚将图像对齐到中心是什么意思。 jsfiddle.net/yzaxo092是你的意思吗？
@NibblyPig — 依赖于外部资源来理解的问题将被关闭。请不要建议人们使用 JSFiddle。 Stackoverflow 支持内联现场演示。

标签： html css

【解决方案1】：

text-align: center; 影响内联框（例如文本节点和 display: inline 的元素）在元素内部。

图像内没有内嵌框。如果您在图像上设置display: inline-block;，那么它本身就会变成一个内联框（但它仍然没有子框）。

在父元素上设置text-align。

div {
    text-align: center;
}

img {
    display: inline-block;
}

<div>
<img src="http://placekitten.com/200/300" alt="">
</div>

【讨论】：

【解决方案2】：

您可以使用此代码

body {
  margin: 0;
}

.main {
  margin: 0 auto;
  width: 1400px;
  text-align: center;
}

.main .link-images-js {
  display: inline-block;
}

<div class="main">
  <img class="link-images-js" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
  <img class="link-images-js" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
  <img class="link-images-js" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
  <img class="link-images-js" src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
</div>

【讨论】：