Html css div对齐，顶部：50%不'；行不通

所以我似乎无法让一些分区对齐工作。基本上，我有一个container 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>

---

尝试简单地将height属性添加到

recipe\u容器中

最好的方法是使用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%;
}

---

我很高兴在这里看到它​

top

语句仅适用于绝对、固定或相对定位元素。 哦，这里没有标榜：中锋

CSS中的垂直对齐可能有点混乱，您应该阅读：

---

我不明白你在找什么。你能画一幅画并附上它吗？我们可能可以更好地帮助您如何做到这一点，使其与配方容器内容高度动态相关？我正在通过django开发模板，所以内容需要是动态的，我不能总是放“height:100px”，因为内容不断变化。此外，我还尝试了“height:（不管是100或50或其他什么）%”的变化，子div“recipe\u container\u left”仍然没有垂直居中。“recipe_container”有一个父div，它可能与该父div有关吗？如果添加最小高度（以像素/em为单位）会怎么样？我不能对父div做任何假设，除非你把它的属性发布在这里。如果我没有弄错的话，为了让top:50%工作，您需要指定height或minheight属性。我将尝试一下minheight。我会再打给你的。再次感谢。那么最好的方法是什么呢？我觉得应该有一个简单的css解决方案。。。这是基本的对齐狗屎。但是如果你认为js是一种方式，我会怎么做呢？谢谢你的努力，mang.like.left\u的内部部分让我觉得我更愿意通过js来完成，只是因为我想坚持不重复自己的方法。设置“recipe\u container\u left”的页边空白顶部。你能在新的回答中重申一下吗？我想看看你如何格式化你的css为这个问题。（是的，听起来我是弱智；我不是。如果你真的有答案，就给我一个答案）。尽管这对我来说仍然不起作用。。。但JSFIDLE显然对此表示支持。一定是我的某个父div搞砸了，或者是我的其他div属性搞砸了。非常感谢。所以wtf有。配方\u容器\u左有一个顶部：50%，元素有一个“相对”位置？我只是想知道这是什么鬼东西。。。。！！！！！

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