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

基本上我需要右边 col 的元素与左边的图像垂直对齐。因为我的列向左浮动，所以 100% 的高度将不起作用。

有任何想法吗？

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

4

2 回答 2

4

如果您将s 包装在两个使用表格显示模式的 DIV 中，vertical-align: middle您仍然可以使用。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;
}

另一种方式，使用 flexboxes：

.row{
  float:left; 

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

  -webkit-align-items: center;    
  -ms-flex-align: center;
  align-items: center;   
}
于 2013-08-12T21:25:36.300 回答
0

您可以使用 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;
}
于 2013-08-12T20:51:17.953 回答