How to centre images with a gap imbetween - html

Question

I am creating a website that has 3 images side by side with a bit of space in between.
I have made the images stay in the centre on my laptop but when I view it on another computer with a larger screen, the images move to the left rather than staying in the middle.
My code is as below
HTML:
<img alt="" src="Image/Mathsgames.png" /> </a>
<img alt="" src="Image/informationbooklet.png" /></a>
<img alt="" src="Image/Quizzes.png" /></a>
CSS:
#rotator {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 200px;
padding: 85px;
text-align: center;
}
Any help would be appreciated. If anybody knows any other way to centre 3 images together with a bit of padding in between that would be appreciated.

Answer 1

You're using the ID #rotator on all of the images. An ID can only be on the page once, so those should be classes instead. You're also closing the <a> tags twice, and no need for the trailing /> on <img> tags in html5.
To center them, since they are inline content, you apply text-align: center; to the parent. I don't see a parent in your code, so I added one called .images
To create space between the images, you can use left/right margin, which I've specified as margin: 0 1em where 1em is the left/right margin, so there will be 2em space between images. Adjust that as you see fit. You could also apply margin to just the center image with .rotator:nth-child(2) { margin: 0 1em; } or give the center image a class and use the class in the selector instead of :nth-child(2)
.images {
text-align: center;
}
.rotator {
display: inline-block;
height: 200px;
padding: 85px;
margin: 0 1em;
}
<div class="images">
<img alt="" src="Image/Mathsgames.png">
<img alt="" src="Image/informationbooklet.png">
<img alt="" src="Image/Quizzes.png">
</div>

Answer 2

They are left aligned, your laptop screen is just too narrow to show it. Wrap them in a container with text-align:center:
.container{
text-align:center;
}
https://jsfiddle.net/58fwtu3c/