CODEWITHSUNDEEP
htmlcss
i like cows
i like cows

Reputation: 25

How to centre images with a gap imbetween

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:

<a href="MathsGamesYear1.html" id="rotator"><img alt=""     src="Image/Mathsgames.png" /> </a></a>

<a href="InformationBooklet1.html" id="rotator"><img alt="" src="Image/informationbooklet.png" /></a></a>

<a href="Year1QuizPage.html" id="rotator"><img alt="" src="Image/Quizzes.png" /></a></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.

Upvotes: 0

Views: 32

Answers (2)

symlink
symlink

Reputation: 12208

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/

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

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">
  <a href="MathsGamesYear1.html" class="rotator"><img alt="" src="Image/Mathsgames.png"></a>

  <a href="InformationBooklet1.html" class="rotator"><img alt="" src="Image/informationbooklet.png"></a>

  <a href="Year1QuizPage.html" class="rotator"><img alt="" src="Image/Quizzes.png"></a>
</div>

Upvotes: 1

Related Questions