html - 如何将这两个 div 与显示在行内 block 中的容器居中？

Question

我无法将这两个 float 的左侧 div 居中放置在高度为自动且显示设置为 inline-block 的容器中。我已将容器的最大宽度设置为 1600 像素，当窗口拉伸(stretch)宽度超过 1600 像素时，容器将固定在左侧。我在容器上尝试了文本 align:center 和 margin:0 auto，但我没有得到想要的结果。

这是我的代码。

.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

查看此工作示例:https://jsfiddle.net/s8rL8e8v/ 如果您的内容有高度，则无需在容器 div 上设置高度。只需放置 overflow:hidden ，它就会处理其中的所有内容并放置一些 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;
}