底部文本对齐或菜单

我有一个菜单有矩形框90x50。一些有单行文本，其他具有多行文本底部文本对齐或菜单

的问题：如何垂直它与纯CSS对齐底部没有破解请

2010-08-25 menardmam

一些代码总是帮助:) – Sotiris 2010-08-25 21:57:41

CSS中的垂直对齐并不像您直觉上期待的那么容易。直接属性vertical-align: bottom只适用于表格单元格。下面是一个很好的资源，它解释了如何（不）在CSS中垂直对齐：Understanding vertical-align, or "How (Not) To Vertically Center Content"。

在坚果：实时化网页浏览器以下工作：

display: table-cell; 
vertical-align: bottom;

但这样不MSIE。您想使父元素相对并将文本包装在绝对定位的元素中，然后将其放在最底部。这里有一个copy'n'paste'n'runnable的例子。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <style> 
      li { 
       position: relative; 
       width: 90px; 
       height: 50px; 
       border: 1px solid black; 
      } 
      li span { 
       position: absolute; 
       bottom: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li><span>text</span></li> 
      <li><span>text<br>multiline</span></li> 
      <li><span>text</span></li> 
     </ul> 
    </body> 
</html>

来源

2010-08-25 22:24:26 BalusC

非常有趣的文字......但我发现：HTTP：//www.trash- factor.com/content/vertical-align-text-inside-div-container-css显示一个解决方案可能更好的一个菜单争夺一个href ...我让你知道！ – menardmam 2010-08-25 22:36:45

我觉得vertical-align属性你想要做什么。否则，也许你可以进一步澄清你的问题？

编辑：您可以通过使用值为'table-cell'的display属性强制任何其他元素的表格单元格行为。我不完全确定这是否与vertical-align属性配合良好，但也许您可以在其上构建。如果我没有记错，则需要额外的中间元素。

来源

2010-08-25 22:16:18 bitmask

我知道，但它适用于表格单元格...我喜欢在一个div – menardmam 2010-08-25 22:27:40

底部文本对齐或菜单

回答

相关问题