居中里内一个div

我有下面这段HTML的：居中里内一个div

<ul id="downmenu"> 
    <li class="copyright"> 
     <div>&copy; 2011. All rights reserved.</div> 
    </li> 
    <li class="twitter"> 
     <img src="images/twitter.png" alt="" /> 
    </li> 
    <li class="facebook"> 
     <img src="images/facebook.png" alt="" /> 
    </li> 
</ul>

而下面这段CSS的：

#downmenu { 
    font-size:14px; 
    border-top: 1px solid #666; 
    clear: both; 
    list-style-type: none; 
    margin: 20px 0; 
    overflow: hidden; 
    padding: 11px 0 11px 34px; 
    width: 870px; 
} 

#downmenu li { 
    float:left; 
} 

#downmenu li.copyright { 
    margin-right:540px; 
    height:36px; 
} 

#downmenu li.copyright div{ 
    margin: auto 0; 
}

（我认为）#downmenu li.copyright设置为36px高，而且我想垂直居中它内部的div。为了达到这个目的，我使用了margin: auto 0;。但它不是中心的。

任何线索？

来源

2011-10-26 VansFannel

居中垂直是有点棘手，看看这个：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – JackWink

完全删除div和使用的line-height居中文本。

将线高设置为等于li的高度将使其垂直居中。

#downmenu li.copyright { 
    margin-right:540px; 
    height:36px; 
    line-height:36px; 
}

来源

2011-10-26 15:21:41 Jrod

试试这个：

#downmenu li.copyright { 
    margin-right:540px; 
    height:36px; 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2011-10-26 15:20:43 Tetaxa

谢谢你的答案，但我得到的一样。 – VansFannel

也许尝试将'div'更改为内联元素，例如'span'。 – Ishmael

您需要将行高设置为与li高度相同。

height：36px; line-height：36px;

我看到你有填充，这可能会改变你看到的div。使用类似Chrome开发者控制台或萤火虫的东西来查看您的CSS如何应用。

来源

2011-10-26 15:31:59

居中里内一个div

回答

相关问题