How to center multiple images

How do I center multiple images in a div element?

Basically, I need to center 4 images. Everything else seems to be fine. I looked through the similar questions and tried that out but nothing seemed to work – one of them, however, centered the images. The problem was that the images are spread out across all of the page, when I need there to be only a couple pixels of space between the images.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Assignment5.html</title>
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="css.css">
    </head>
    <body>
        <h1>Visit These Famous Places</h1>
        <div>
            <img src="Images/Beijing-China.jpg" alt="Beijing" title="Beijing, China">
            <img src="Images/Grand-Canyon.jpg" alt="Grand Canyon" title="Grand Canyon, Pheonix, USA">
            <img src="Images/Sydney-Opera-House.jpg" alt="Sydney Opera Hourse" title="Sydney Opera House, Sydney, Australia">
            <img src="Images/Statue-Of-Liberty.jpg" alt="Statue of Liberty" title="Statue of Liberty, New York, USA">
        </div>
    </body>
</html>

CSS:

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
}

img     {
            height: 100px;
            width: 150px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px auto;
            display: block;
}


you should put

div{
  ...
  text-align: center;
  ...
}

you need to use justify-content: center; on the div element and give the images margin left and right. DEMO

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
}

img     {
            height: 100px;
            width: 150px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px 8px;
            display: block;
}

Problem: the margin: 0 auto; on the img that have fixed widths allows the space between the images to grow as the browser grows.

The auto here sets the img horizontal margins relative to their parent div container such that each img element has equal horizontal margins inside of their shared div container.

Your parent div container for the images does not have a fixed width. Therefore, this parent container will grow in width as the browser grows in width.

The horizontal margins between the images will also grow as the parent container grows. The images have fixed widths, so the space between them must grow to account for the increased width of the parent container.

If you want to see this in action, try adjusting the browser width inside this demo.


Solution: If you remove margin: 0 auto; and set justify-content: center; on your div tag, the images will be centered.

For some margin between the images, you can set something like margin: 0 0.5rem; on the img tags. You can increase or decrease 0.5rem to increase or decrease the spacing between the images.

Here is a CodePen Demo or you can run the below snippet:

h1 {
  text-align: center;
  text-shadow: grey 2px 2px 10px;
}

div {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img {
  height: 100px;
  width: 150px;
  border: 3px solid black;
  border-radius: 20px;
  display: block;
  margin: 0 0.5rem;
}
<h1>Visit These Famous Places</h1>
<div>
  <img src="Images/Beijing-China.jpg" alt="Beijing" title="Beijing, China">
  <img src="Images/Grand-Canyon.jpg" alt="Grand Canyon" title="Grand Canyon, Pheonix, USA">
  <img src="Images/Sydney-Opera-House.jpg" alt="Sydney Opera Hourse" title="Sydney Opera House, Sydney, Australia">
  <img src="Images/Statue-Of-Liberty.jpg" alt="Statue of Liberty" title="Statue of Liberty, New York, USA">
</div>
img {
        margin: 0 auto;
}
h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
}

img     {
            height: 50px;
            width: 50px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px auto;
            display: block;
            margin: 0 auto;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Assignment5.html</title>
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="css.css">
    </head>
    <body>
        <h1>Visit These Famous Places</h1>
        <div>
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
        </div>
    </body>
</html>

You should just use text-align:center for your div it will align all items in the div to the center not just text, and also remove the display:block from the image because that will stack the images and remove the margin: 0 auto because it is not necessary so it should look like the following: