如何将这两个div居中显示为内联块的容器？

Question

I'm having trouble centering these two floated left divs into a container which has a height of auto and a display set to inline-block . I've given my container a max-width of 1600px and when the window is stretched wider than 1600px, the container stays pinned to the left. I tried text align:center , and margin:0 auto , on the container but I'm not getting the result I'm looking for.

Here is my code.

 .keyfacts { width: 94%; height: auto; max-width: 1600px; padding: 60px 3% 60px 3%; background-color: #634A4B; display: inline-block; } .keyfactsleft { float: left; width: 47%; height: auto; padding-right: 3%; } .keyfactsleft p { font-family: 'Raleway', san-serif; font-size: 24px; line-height: 32px; font-weight: 100; color: #58595b; margin-bottom: 35px; } .keyfactsright { float: left; width: 50%; height: 465px; background-image: url(_images/meredith-manor-aerial.jpg); background-size: cover; background-position: center center; background-color: #A05B5C; } 

 <section class="keyfacts"> <div class="keyfactsleft"> <h3 class="red">When</h3> <p>Saturday, October 14, 2017 at Five in the Evening</p> <h3 class="red">Where</h3> <p>Meredith Manor<br>2270 Pottstown Pike, Pottstown, PA 19465</p> <p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you'll be sleeping if you plan on getting wild and staying over.</p> </div> <div class="keyfactsright"></div> </section> 

Answer 1

see this working sample: https://jsfiddle.net/s8rL8e8v/ if your content has a height, you dont need to put height on your container div. just put overflow:hidden and it will cope all the content inside it and put some padding .

.keyfacts {
        width: 94%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 3% 60px 3%;
    background: #634A4B
}

.keyfactsleft {
    float: left;
    width: 47%;
    height: auto;
    padding-right: 3%;
}

.keyfactsleft p {
    font-family: 'Raleway', san-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 100;
    color: #58595b;
    margin-bottom: 35px;
}

.keyfactsright {
    float: left;
    width: 50%;
    height: 465px;
    background-image: url(_images/meredith-manor-aerial.jpg);
    background-size: cover;
    background-position: center center;
    background-color: #A05B5C;
}

Answer 2

If you want the parent container to be centered, then div.keyfacts must be a block level element, for example, display: block or display: table .

In both cases, margin: 0 auto will center the container.

Since you are specifying the width for div.keyfacts , then either choice will work.

(I adjusted the width and max-width values for demonstration only.)

 .keyfacts { width: 70%; height: auto; max-width: 450px; padding: 60px 3% 60px 3%; background-color: #634A4B; display: table; margin: 0 auto; } .keyfactsleft { float: left; width: 47%; height: auto; padding-right: 3%; } .keyfactsleft p { font-family: 'Raleway', san-serif; font-size: 24px; line-height: 32px; font-weight: 100; color: #58595b; margin-bottom: 35px; } .keyfactsright { float: left; width: 50%; height: 465px; background-image: url(_images/meredith-manor-aerial.jpg); background-size: cover; background-position: center center; background-color: #A05B5C; } 

 <section class="keyfacts"> <div class="keyfactsleft"> <h3 class="red">When</h3> <p>Saturday, October 14, 2017 at Five in the Evening</p> <h3 class="red">Where</h3> <p>Meredith Manor <br>2270 Pottstown Pike, Pottstown, PA 19465</p> <p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you'll be sleeping if you plan on getting wild and staying over.</p> </div> <div class="keyfactsright"></div> </section> 

Answer 3

You can either do:

body { text-align: center } to center the .keyfacts , but this will require you to do .keyfacts { text-align: left }

I would go with .keyfacts { display: block, margin: 0 auto } instead.

If an element is display: inline-block , then the parent will need a text-align: center to center the element, but this affects all children elements within the container.

If an element is display: block , then applying margin: 0 auto on the element itself (NOT THE PARENT) will center the element.