Question

我想知道您是否可以采用一个div的高度并将其放置在距其低两层的位置（一个孩子）。

我正在使用Bootstrap，并尝试使用position: absolute来处理此问题，但是它不起作用。使用此方法，我还遇到了一个问题：

.prod-pod {
  top: 50%;
  transform: translateY(+50%);
}

问题是，有两个使用.prod-pod的元素，它们的高度不同，其中一个元素的col内有一个附加元素（左边的一个）。这样一来，左边的那个就不会垂直居中。

<div class="prod-align">
  <div class="col-md-4">

    <%= link_to "Back to products", packs_path, class: "btn btn-info btn-block top-drop" %> <!-- I don't want this thing centered vertically -->

    <div class="wellington top-drop prod-pod">
      <h3 class="featurette-heading pack-name center"><%= @pack.title %></h3>
      <h4 class="text-muted align-left">License:</h4>
      <h4 class="featurette-heading align-right"><%= link_to "EULA", legal_path %></h4>
      <div style="clear: both;"></div>
      <h4 class="text-muted align-left">Category:</h4>
      <h4 class="featurette-heading align-right"><%= @pack.pack_type %></h4>
      <div style="clear: both;"></div>
      <h4 class="text-muted align-left">Price:</h4>
      <h4 class="featurette-heading align-right">$ <%= @pack.price %> <span class="text-muted CAD">USD</span></h4>
      <div style="clear: both;"></div>
      <button class="btn btn-success btn-block" id="btn-buy" type="button">Purchase This Library</button>
    </div>
  </div>

  <div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
    <div class="wellington top-drop">

    </div>
  </div>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <h3 class="featurette-heading pack-name center">What's inside</h3>
      <div class="pack-contents"><%= raw @pack.pack_contents %></div>
    </div>
  </div>
</div>

我要实现的目标是将两个.prod-pod div垂直居中放在.prod-align div中。

我也在div之一中使用浮点数。

Answer 1

您可以使用display: flex;。

与父级高度无关，div内容将垂直居中。

.prod-pod {

  border: 1px solid grey;
  align-items: center; 
  display: flex;
}
.height-100{
  height: 100px;
}

.height-200{
  height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row prod-align">
  <div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">

    <div class="wellington top-drop prod-pod height-100">
qqq
    </div>
  </div>

  <div class="col-md-4 col-xs-4">
    <div class="wellington top-drop prod-pod height-100">

    </div>
  </div>

  <div class="col-md-4 col-xs-4">
    <div class="height-200 wellington top-drop prod-pod">
qqqqqqq000
    </div>
  </div>
</div>

Answer 2

只需使用display:flex将父div更改为flexbox，子元素的高度应相等。现在，只需使用align-items属性将子元素的内容垂直居中。

选中此 JSFiddle 或运行以下代码段，以获取上述内容的实际示例：

@media (min-width: 992px){ /* only apply if "col-md-" and above */
  .prod-align {
    display:flex; align-items:center;
  }
}
.col-md-4 {border: #222 solid 5px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="prod-align">
  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <p>short height elements here</p><p>short height elements here</p>
    </div>
  </div>

  <div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
    <div class="wellington top-drop">
      <p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p>
    </div>
  </div>
</div>

Answer 3

要使用CSS将div中的元素居中，您需要以下选项：

align-content: center;

将其放在“ col-md-4 ”上。

但是我建议您使用Bootstrap4。使用此版本非常容易：https://getbootstrap.com/docs/4.2/utilities/flex/

希望它能对您有所帮助。

如何基于两个水平以上的div的高度垂直对齐中心

3 个答案: