Hello! Image Elements on mobile devices is not center.

Large screens

Small screens (Mobile Device)

HTML

  <center>
    <div id="Navigation">
      <a href="#YourForum"><img id="NavigationItem" src="assets/img/forums.png" /></a>
      <a href="#YourStore"><img id="NavigationItem" src="assets/img/store.png" /></a>
      <a href="#YourVote"><img id="NavigationItem" src="assets/img/vote.png" /></a>
    </div>
  </center>

CSS

#Navigation {
  margin: 6rem auto;
}
#NavigationItem {
  transition: .5s;
  margin-left: 1rem;
}
#NavigationItem:hover {
  -webkit-transform: scale(1.05); transform: scale(1.05);
}

CodePudding user response：

As @cloned mentioned, using <center> is now considered the old-fashioned way of centering items. This was the best option during the pre-flex-box era. The main reason <center> is now depreciated is because the web has to be more responsive than ever due to the varying device screen sizes. I would suggest using display: flex; on your #Navigation id with justify-content: center; This is a highly reponsive alternative for what you're trying to accomplish. Also, I added flex-wrap: nowrap; to ensure your images don't wrap despite how small the screen gets. Please see the changes below, and insert them into your code.

#Navigation {
  margin: 6rem auto;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
#NavigationItem {
  transition: .5s;
  margin-left: 1rem;
}
#NavigationItem:hover {
  -webkit-transform: scale(1.05); transform: scale(1.05);
}

<div id="Navigation">
 <a href="#YourForum"><img id="NavigationItem" src="https://dummyimage.com/100x100/000/fff" /></a>
 <a href="#YourStore"><img id="NavigationItem" src="https://dummyimage.com/100x100/000/fff" /></a>
 <a href="#YourVote"><img id="NavigationItem" src="https://dummyimage.com/100x100/000/fff" /></a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try adding text-align: center to the #Navigation styles, if it doesn't work use flexbox

#Container {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}

NB: enclose each child in a div

CodePudding user response：

You need to use flex/grid. if you use flex, give the container a height and

display:flex; justify-content:center;align-items:center;flex-wrap:wrap;

if your screen is small, the items are not centered in the middle, they Went down a row because of the wrap. if you want that the images will be in the middle, Decrease their size