时间戳

首页 > 解决方案 > CSS“inline-block”值不适用于图像

html - CSS“inline-block”值不适用于图像

问题描述

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

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

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

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

标签： htmlcss

解决方案

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>

推荐阅读