Question

soooo我似乎无法获得一些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

中看到它

Answer 2

top语句仅适用于绝对，固定或相对定位的元素。哦，没有任何问题：中心

在CSS中垂直对齐可能有点乱，你应该阅读： Vertically centering a div inside another div

Answer 3

尝试简单地将高度属性添加到recipe_container。

css div alignment，top：50％不起作用

3 个答案: