Question

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

我也尝试过使用“ block”值，但是它仍然无法正常工作。是我的电脑吗？是浏览器吗？

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

使用Visual Studio Code时，它不会检测到任何错误，与NP ++和Sublime Text 3相同。使用“ inline-block”值，它只能工作一次，但之后却无法工作。有谁知道这是什么问题？

Answer 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>

Answer 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>

CSS“内联块”值不适用于图像

2 个答案: