css div对齐，顶部：50％不工作

soooo我似乎无法获得一些div对齐工作。基本上，我有一个容器div，并且我想要div内的左列和右列，基本上右列总是会比左列纵向更大。所以我想让左栏垂直居中右栏。这里是我的CSS：css div对齐，顶部：50％不工作

.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中。我一直在Google上搜索一下，似乎无法获得任何工作。我知道，新手问题。任何帮助？

喜欢这就是我想要的结果（即动态地扩展到浏览器窗口中的一些）：

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

来源

2012-06-04 jonc

我不明白你在找什么。你能画一幅画并附上它吗？我们可能能够更好地帮助您 –

做到这一点

最好的办法是使用JavaScript来对准左格，或者如果你真的想使用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

来源

2012-06-04 07:08:50 killebytes

那么最好的办法是什么？就像我觉得应该有一个简单的CSS解决方案......这是基本的对齐狗屎。但如果你认为一个js是要走的路，我该怎么做呢？感谢你的努力。 – jonc

就像.left_inner部分让我觉得我宁愿通过js来做，因为我想坚持不要重复自己的方法。 – jonc

设置“recipe_container_left”的页边距。（right-div-height/2） - （left-div-height/2） – killebytes

尝试将height属性只是添加到recipe_container。

来源

2012-06-04 06:26:37 IgnasK

我该如何做到这一点，以便它对recipe_container内容高度是动态的？我正在通过Django开发模板，所以内容需要动态，我不能总是把“高度：100px”，因为内容不断变化。此外，我尝试了“身高:(无论像100或50或其他）％”的变体，而子div“recipe_container_left”仍然没有垂直居中。有一个父母div“recipe_container”，它可以做那个父母？ – jonc

如果以像素/ em添加最小高度怎么办？我不能假设任何有关父母的div，除非你在这里发布它的属性。如果我没有弄错，为了获得最高分：50％的工作，你需要指定高度或最小高度属性。 – IgnasK

我会试一试最小高度的东西。我会尽快给您回复。再次感谢。 – jonc

top报表只能用绝对的工作，固定的或相对定位的元件。哦，没有flaot：中心

在CSS垂直对齐可以是一个有点乱，你应该阅读： Vertically centering a div inside another div

来源

2012-06-04 07:11:00 meo

derp derp。没有浮动：中心; ... 得到它了。感谢芒！ – jonc

sooo wtf .recipe_container_left有一个顶部：50％，元素有一个“相对”的位置？我juuuust wannna图thiiiis shiiit ouuuuut .... !!!!! – jonc

css div对齐，顶部：50％不工作

回答

相关问题