8

我正在使用这种技术http://codepen.io/chriscoyier/pen/gsodI。它几乎很好 - 但在第二个框中，您可以看到内容框伸出外部元素。

如何解决这个问题，如果内部元素小于外部元素，它会居中，如果它更高，它会像这张图片一样“推动”外部元素？

在此处输入图像描述

4

4 回答 4

1

您需要提供三个主要属性才能垂直对齐

  • 高度 ： ...;
  • 显示：表格单元格；
  • 垂直对齐：中间；
于 2013-12-26T13:40:27.330 回答
0

在您的第二个框中，更改此行：

<div class="block" style="height: 200px;">

对于这个：

<div class="block" style="min-height: 200px;">
于 2013-11-03T14:06:40.763 回答
0

这似乎是你所描述的。（演示中的第二个示例）

要修复此添加display:table;和width: 100%块（父）元素

更新的小提琴

标记

<div class="block">    
    <div class="centered">
    </div>   
</div>

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
   background: orange;
   display: table; /* added this */
   width: 100%;  /* added this */
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

如果您想查看块元素占据视口高度 100% 的示例，请查看以下内容： 之前...之后

于 2013-12-22T22:01:16.290 回答
0

在你的 CSS

vertical-align:middle
于 2013-11-03T14:21:07.750 回答