Question

我无法将这两个浮动的左侧div放入一个高度为auto且显示设置为inline-block的容器中。我给了我的容器最大宽度为1600px，当窗口拉伸宽度超过1600px时，容器保持固定在左边。我在容器上尝试了文本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;
}

Answer 2

如果您希望父容器居中，则div.keyfacts必须是块级元素，例如display: block或display: table。

在这两种情况下，margin: 0 auto都会使容器居中。

由于您指定了div.keyfacts的宽度，因此任一选项都可以。

（我调整了width和max-width值仅用于演示。）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以这样做：

body { text-align: center }以.keyfacts为中心，但这需要您执行.keyfacts { text-align: left }

我会选择.keyfacts { display: block, margin: 0 auto }。

如果元素为display: inline-block，则父级将需要text-align: center来居中元素，但这会影响容器中的所有子元素。

如果元素为display: block，则在元素本身（不是父母）上应用margin: 0 auto将使元素居中。

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

3 个答案: