垂直中心ul div

这就是我的代码的样子。垂直中心ul div

HTML

<div id="container"> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</div>

CSS

#container { 
    width: 584px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
} 

#container ul { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    width: 3504px; 
} 

#container ul li { 
    width: 584px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
}

正如标题所说，我要垂直居中UL的DIV中。我无法更改上面的CSS规则，因为。我一直在使用Google搜索解决方案，并试图找到一种方法，但一切似乎都与我已有的规则相冲突。

任何想法如何做到这一点？

它会帮助，而不是#container div我用一行和一列的表？

来源

2013-04-18 Banana

如果您事先知道元素高度（或使用JavaScript进行测量），则只能使用绝对定位。 – CBroe

我可以做到这一点。你能给我多一些细节吗？ – Banana

尝试添加：auto;到你的边际：0; – DiederikEEn

如果你可以添加jQuery库，你可以试试这个，

$(document).ready(function(){ 

    // Remove li float 
    $("#container ul li").css("float", "none"); 

    // Get the full height of the UL 
    var ulheight = $("#container ul li")[0].scrollHeight; 

    // Based on the height of the container being 50px you can position the UL accordingly 
    var pushdown = (50-ulheight)/2; 
    $("#container ul li").css("top", pushdown); 

});

来源

2013-04-18 09:23:31 Rob

为什么要去掉浮子？ – FixMaker

为了排除故障。我会尝试让裸骨解决方案在添加任何可能影响定位的其他任何东西之前先工作。既然有人说CSS不能被修改，那么你可以通过jQuery删除它。 – Rob

我的意思是说我需要CSS是出于其他原因，而不是几乎不可能将其删除：D – Banana

“围绕”一个div或其他容器纵向在CSS相当棘手，这是你的选择。

你知道你的容器

的高度，如果你知道容器的高度，你可以做到以下几点：

#container { 
    position: absolute; 
    top: 50%; 
    margin-top: -half_of_container_height_here; 
}

所以我们基本上是放在中间，然后抵消它使用负值的余量等于高度的一半。你的父容器需要有position: relative。

你不知道你的容器

的确切高度在这种情况下，你需要使用JavaScript和计算适当的利润率（不幸的是你不能使用margin-top: auto或类似的东西）。

More info here。

来源

2013-04-18 09:50:31 MMM

我尽我所能来说明为什么'margin-top'不能'自动'[这里]（http://stackoverflow.com/a/12417336/1081234） - 以及更为优雅的居中内容方式垂直比使用绝对定位:) –

请使用将来的搜索功能。完整的答案解释为here;这是您的方案的代码：

.container { 
    display: table; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    width: 100%;} 
.helper { 
    #position: absolute; /*a variation of an "lte ie7" hack*/ 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle;} 
ul{ 
    #position: relative; 
    #top: -50%; 
    margin:0 auto; 
    width:200px;}

三个要素必须被嵌套像这样：

<div class="container"> 
    <div class="helper"> 
    <ul><!--stuff--></ul> 
    </div> 
</div>

http://jsfiddle.net/ovfiddle/yVAW9/

来源

2013-04-18 09:54:02

难道你不觉得我已经在寻找答案吗？你的方式行不通。 – Banana

@Banana我知道这是一个古老的问题，但你使用的是什么浏览器？ –

经过大量研究，我确定此方法适用于Opera，IE8 +，Firefox，Chrome和Safari。 –

-1

现在你可以让父容器显示：弯曲和align-项目：中心。这应该工作。尽管旧版浏览器不支持flexbox属性。

来源

2016-08-28 21:57:20

垂直中心ul div

回答

相关问题