0

HTML

  <div class="wrapper">
    <div class ="content">
      <div id="container">
      </div>
    </div>
  </div>

CSS

.wrapper {
  width: 1000px;
}

.content {
  width: 100%;
  text-align: center;
}

#container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Output: https://gyazo.com/c36c7049e68c46ea617391b5dd93b81f

I'm importing data from an XML file and trying to centre the data within the content div but, the images keep going over the page and I have no clue why. Any help or research links would be appreciated, cheers.

Brandon Brock
  • 52
  • 2
  • 6

1 Answers1

0

You simply need to set justify-content to the value of center.

If you are not too steady using flexbox, I really recommend this interactive game to learn how to master flex: flexbox froggy

.wrapper {
  width: 1000px;
}

.content {
  width: 100%;
  text-align: center;
}

#container {
  display: flex;
  justify-content: center;
}

span {
  height: 50px;
  width: 30px;
  background-color: salmon;
  margin: 0 20px;
}
<div class="wrapper">
  <div class="content">
    <div id="container">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
Sølve T.
  • 4,159
  • 1
  • 20
  • 31
  • This method works, is it possible to break the images onto a new line? Having 4 images on a row and the other another row. – Brandon Brock Jan 11 '19 at 21:57
  • Glad to help. This is possible with flex yes. As I said, you will find all your answers by learning to use flexbox :) This is also another question you would have to ask in a different question. – Sølve T. Jan 11 '19 at 22:05