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>

我的问题：

是的我知道如何垂直对齐大多数内容。我使用了很多技术，例如将父设置为表，将子设置为table-cell。然而，大多数技术要求我知道父/子的高度 - 或者他们假设你正在使用块元素。

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

.col{float:left}

基本上我需要右侧col上的元素与左侧的图像垂直对齐。因为我的列向左浮动，100％的高度将无效。

有什么想法吗？

*顺便说一句，我不知道为什么我的代码在这里没有正确显示。我似乎无法让缩进工作。

Answer 1

如果您将vertical-align: middle包裹在two DIVs that use table display mode内，您仍然可以使用display: table-cell和.col。

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

另一种方式，using flexboxes：

.row{
  float:left; 

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

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

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

在不知道高度的情况下垂直对齐中间

2 个答案: