5

太棒了，我似乎无法让一些 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)
4

3 回答 3

2

top语句仅适用于绝对、固定或相对定位的元素。哦，没有浮动：中心

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

于 2012-06-04T07:11:00.443 回答
2

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

​​​​​​​​​​​​​​​​​​​​​​​​</p> 

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

jsfiddle 来看看它的实际效果​</p>

于 2012-06-04T07:08:50.217 回答
0

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

于 2012-06-04T06:26:37.953 回答