垂直居中的链接一个div

我有一个无序列表中...垂直居中的链接一个div

<ul class="hide"> 
    <li class="home"> 
    <div class="link"> 
     <a href="/">Home</a> 
    </div> 
    </li> 
    <li class="about"> 
    <div class="link"> 
     <a href="/about">About Our Community</a> 
    </div> 
    </li> 
    <li class="contact"> 
    <div class="link"> 
     <a href="/contact">Contact Us</a> 
    </div> 
    </li> 
</ul>

我的CSS是这样的....

#sitenav ul li .link a { 
    color: #555; 
    text-decoration: none; 
    float: left; 
    padding-right: 3px; 
    margin-top: auto; 
    margin-bottom: auto; 
}

但利润率不垂直居中链接

任何想法？

来源

2012-06-13 Jackie

链接文本总是在一行中，还是应该看起来不错，如果出现换行符？ –

如果您的链接将只有一行 - http://jsfiddle.net/SE7aB/ –

为什么你有一个div在那里？你可以直接设计li的样式......另外，请提供一个代码，让链接“unaligned” – Andre

该解决方案可以为你工作：http://jsfiddle.net/WLQAS/8/

margin-top: auto;和margin-bottom: auto;不工作，垂直对齐的对象。

更新CSS

li { 
    color: #555; 
    text-decoration: none; 
    float: left; 
    padding-right: 3px;  
} 

.link { 
    vertical-align: middle; 
    display: table-cell; 
    height: 50px; 
}

来源

2012-06-13 16:30:52 Luis

我想让它们成为一个“行”，所以如果我通过添加宽度来改变它：20％它会中断它再次... http://jsfiddle.net/WLQAS/2/ – Jackie

@Jackie我认为这个答案可以解决你的问题。您可以调整Luis的代码，使其位于一行：http://jsfiddle.net/WLQAS/7/。只要容器宽度足以容纳内容，它应该在一条线上。 –

这里的问题不是普遍的宽度，我也不确定如果它是在一个小屏幕上，将文本限制到一行是一个好主意。 – Jackie

下面是垂直与未知高度内的div对准的a - 元素一个跨浏览器兼容的解决方案：

作品与链接文本使用和不使用线-breaks。

CSS

* { margin: 0; padding: 0 } 

ul {} 
ul li { 
    display: table; 
    height: 75px; 
    #position: relative; /* ie hack */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

ul li div { 
    #position: absolute; /* ie hack */ 
    #top: 50%; /* ie hack */ 
    display: table-cell; 
    vertical-align: middle; 
} 

ul li div a { 
    #position: relative; /* ie hack */ 
    #top: -50%; /* ie hack */ 
    border: 1px solid green 
}

它不建议在这里使用CSS黑客，使用conditional comments代替。

现场演示：http://jsfiddle.net/ahdzg/1/
更多的相关信息了解这一招：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

希望这有助于。否则，请随时询问。

来源

2012-06-13 20:55:41

我转换李的元素div的，它仍然很好。 –

垂直居中的链接一个div

回答

相关问题