CSS "inline-block" value not working with images

Question

With the "inline-block" value in CSS3, I am trying to align images into the center but it isn't aligning!

I have tried using the "block" value as well but it still doesn't work. Is it my PC? Is it the browser?

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

With Visual Studio Code it doesn't detect anything wrong, same with NP++ and Sublime Text 3. With the "inline-block" value, it has worked once but after that it hasn't worked. Does anyone have any idea what the problem is?

I think you should create a mockup in jsfiddle so we can see, because it's unclear what you mean by align images into the center. Is https://jsfiddle.net/yzaxo092/ this what you mean? — NibblyPig, Oct 17 '19 at 09:30
@NibblyPig — Questions that depend on external resources to be understood will be closed. Please don't advise people to use JSFiddle. Stackoverflow supports inline live demos. — Quentin, Oct 17 '19 at 09:32

score 3 · Answer 1 · answered Oct 17 '19 at 09:30

text-align: center; affects the inline boxes (such as text nodes and elements that are display: inline) inside the element.

There are no inline boxes inside the image. If you set display: inline-block; on an image, then it becomes an inline box itself (but it still has no children).

Set text-align on the parent element.

div {
    text-align: center;
}

img {
    display: inline-block;
}

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

score 0 · Answer 2 · answered Oct 17 '19 at 09:38

You can use this code

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 "inline-block" value not working with images

2 Answers2