不知道高度如何垂直居中

Question

<div class="grid-960">
    <div class="row content">
        <div class="col col-6-12">
            <img src="imgs/image.jpg" alt="img"/>
        </div>
        <div class="col col-6-12 last">
            <h2>Title1</h2>
            <p>My content</p>
        </div>
    </div>
</div>

我的问题：

我知道如何垂直对齐大多数内容。我使用了许多技术，例如将父元素设置为表格，将子元素设置为表格单元格。然而，大多数技术都要求我知道父/子元素的高度，或者它们假定您正在使用块元素。

我正在使用浮动元素，并且不知道它的高度（动态内容）。

.col{float:left}

基本上我需要右侧列的元素与左侧图像垂直对齐。因为我的列向左浮动，所以100%的高度没有任何效果。

有什么想法吗？

顺便说一句，我不确定为什么我的代码在这里从未正确显示。我似乎无法使缩进工作。

- user1214678

---

你不需要保持它为 float:left，对吗？为什么不移除 float 并将其作为表格单元结构实现呢？ - undefined

但是你不需要使用display: table / cell来固定高度。而且这似乎是一个重复的问题：https://dev59.com/0W035IYBdhLWcg3wcvqS - undefined

@andi - 是的，我需要将其保持为浮点数，用于响应式设计目的。这是一个网格。 - user1214678

@onetrickpony - 因为col div是浮动的，所以元素的高度将与自身一样高，因此它不会延伸到其父元素的高度。 - user1214678

@gdaniel - 我很确定纯CSS无法实现这个，除非你移除浮动。 - undefined

Answer 1

如果你将 .col 包在使用表格显示模式的两个 DIV 中，你仍然可以使用 vertical-align: middle 和 display: table-cell。请参考此处。

.wrap-1{
  display: table;
  min-height: 100%;   /* extend table height to min. 100% of the floated elm. */
}

.wrap-2{
  display: table-row;
}

.col{
  display: table-cell;
  vertical-align: middle;
}

另一种方法是使用弹性盒子：

.row{
  float:left; 

  display: -webkit-flex;    
  display: -ms-flexbox;
  display: flex;

  -webkit-align-items: center;    
  -ms-flex-align: center;
  align-items: center;   
}

- nice ass

Answer 2

你可以很容易地使用jQuery来实现这个功能。

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
        });
   };
})(jQuery);

$('.classname').vAlign();

源代码：http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/ 更新内容：

可能的CSS解决方案：jsFiddle

<div class="parent">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam blanditiis optio aliquam voluptas adipisci itaque repellendus voluptatum magni vel nam sequi hic voluptatem perferendis deleniti labore aliquid incidunt officiis magnam.</div>
</div>

.parent {
    width:300px;
    padding:50% 0;
    border:1px solid black;
    float:left;
}
.child {
    margin:0 auto;
    border:1px solid black;
}

- Shivam

---

@Shivam...我知道如何使用jquery实现这个。不过我真的想用css来实现这个。还是谢谢你！ - user1214678

@gdaniel 看一下这个，也许有帮助？http://stackoverflow.com/questions/8997500/vertical-centering-of-div-without-javascript-when-divs-height-isnt-fixed - undefined

你提供的示例之所以有效，是因为它们设置了父元素的高度。感谢你的帮助，但我想我会转而使用jQuery。 - user1214678

尝试从父级div中移除set height，并设置padding-top和padding-bottom为50%。示例：http://jsbin.com/uvodop/22/edit - undefined

在大多数情况下添加等量的填充是有效的，这取决于父元素的高度。但是，考虑到我的父div通常具有相同的高度（即使没有明确设置），我会选择使用这种方法。你可以更新你的答案，或者发布一个新的答案，我会关闭它。 - user1214678

我更新了我的答案。希望这对你有所帮助：）。只使用CSS来垂直对齐一个div是有些困难的，除非使用table-cell等方法...但是，祝你在项目中好运！ - undefined