html - css div 对齐，顶部 :50% doesn't work

Question

太棒了，我似乎无法让一些 div 对齐工作。基本上，我有一个容器 div，我想要在 div 中有一个左列和一个右列，基本上右列在垂直方向上总是比左列大。所以我希望左列在右列旁边垂直居中。这是我的 CSS:

.recipe_container{
    float:center;
    width:800px;
    position:relative;
    padding:0px;
    border:5px solid #B22222;
    margin:0px auto;
}
.recipe_container_left{
    float:left;
    width:390px;
    position:relative;
    top:50%;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
}
.recipe_container_right{
    float:right;
    width:390px;
    position:relative;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
 }

html 是这样放置的

<div class="recipe_container">
    <div class="recipe_container_left">
         recipe title and ingredients
    </div>
    <div class="recipe_container_right">
         recipe cooking instructions
    </div>
 </div>

但左侧的“recipe_container_left”div 并未在父“recipe_container”div 内垂直居中。我在谷歌上搜索了一段时间，但似乎无法正常工作。我知道，新手问题。有帮助吗？

这就是我想要的结果(动态缩放到浏览器窗口的一些):

------------------------------------------------------------
recipe_container             ============================
                             |                          |
                             |  recipe_container_right  |
 =========================== |  recipe cooking-         | 
 | recipe_container_left   | |  -instructions           |                   
 | recipe title+ingredients| |                          |
 |                         | |                          |
 =========================== |                          |
                             |                          |
                             |                          | 
                             ============================
------------------------------------------------------------
(repeat)

Answer 1

最好的方法是使用 javascript 对齐左边的 div 或者如果你真的想使用 css 你可以试试

<div class="recipe_container_left">
   <div class="left_inner"></div>
</div>

.recipe_container_left{
   position:relative;
   top: 50%;
}
.left_inner{
   position:relative;
   top: -50%;
}

编辑:此方法需要设置高度才能使顶部位置起作用。试试这个表格方法，在不设置任何固定高度的情况下效果更好。

<div class="recipe_container">
    <div class="recipe_container_left">
        recipe title and ingredients
     </div>

    <div class="recipe_container_right">
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
   </div>
</div>

.recipe_container{
display: table;
}
.recipe_container_left{
display: table-cell;
vertical-align: middle;
width: 300px;
}
.recipe_container_right{
width: 400px;
}

jsfiddle 在 action 中查看