html – css div alignment,top：50％不起作用

概述soooo我似乎无法得到一些div对齐工作.基本上,我有一个容器div,我想在div中有一个左列和一个右列,基本上右列总是垂直大于左列.所以我希望左列垂直居中于右列旁边.这是我的css： .recipe_container{ float:center; width:800px; position:relative; padding:0px; border:5 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 >    <div >         recipe Title and ingredIEnts    </div>    <div >         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)

解决方法 最好的方法是使用JavaScript来对齐左div,或者如果你真的想使用CSS,你可以尝试

<div >   <div ></div></div>.recipe_container_left{   position:relative;   top: 50%;}.left_inner{   position:relative;   top: -50%;}

编辑：这种方法需要设置一个高度,以便顶部位置工作.
尝试这种表格方法,无需设置任何修复高度即可更好地工作

<div >    <div >        recipe Title and ingredIEnts     </div>    <div >       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看到它

总结

以上是内存溢出为你收集整理的html – css div alignment,top：50％不起作用全部内容，希望文章能够帮你解决html – css div alignment,top：50％不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。