Centering a Div within Div (I can't get My Div to Center)

1

I can not get my div centered within a div. I’ve tried everything and I just can’t get it to work. The outer div is the “container” div, and the interior div is within another div entitled or classed as “background image”.

<!--Intro-->
<div class="container">

<!--Portfolio-->
<div class="background-image">
<div class="picture-row">
      <div class="col-xs-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/5/0/50c0147bbe0ad7038df7d3d80e836cc95a8918bc.jpg' class="img-responsive" width="75%" />
      </div>
      <div class="col-xs-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/5/0/50c0147bbe0ad7038df7d3d80e836cc95a8918bc.jpg' class="img-responsive" width="75%"/>
      </div>
      <div class="col-xs-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/5/0/50c0147bbe0ad7038df7d3d80e836cc95a8918bc.jpg' class="img-responsive" width="75%" />
      </div>

The weird thing is that the background image is centered within the “container” div, but the images within the “picture-row” div won’t center within the “container” div, as how the “background image” div does…

Here’s the CSS code for how I attempted to center the “picture-row” div:

.picture-row {
margin-left: auto;
margin-right: auto;
}

And here is the link to my code pen: https://codepen.io/IDCoder/pen/OWbXLw?editors=1100

2

Try adding the center-block class to your images.

3

Would I put that in the CSS?

4

No. That class is part of Bootstrap :wink:

5

Haha never seen that term before! And what I’m trying to do is center that row of “Coming Soon” images between the border lines of the container…“center-block” will do that?

6

If I understood it correctly, what you want is to center the images in their respective divs/columns. Am I correct?

7

The “coming soon” image boxes are already centered within it’s own div, but it’s not centered within the main “container” div…for example, on the left side of the “coming soon” boxes, there is less of a space than there is on the right side of the “coming soon” boxes…that’s what I want to fix…

8

Try using CSS
.classB{
position: relative;
margin: 0 auto ;
}
html:

9

Actually, they weren’t.

I forked your pen and added red outlines to your columns.

I think the real problem is that the images are not centered. Giving them the center-block class should center them.

10

Hey! I FIXED IT! YAY! I had to add align=“center” to the “container” div! OMG! That was so easy!