垂直对齐的元素不工作

我想要实现的是一组元素（框）与链接里面。这个环节应该是在底部右侧，但vertical-align属性是不工作垂直对齐的元素不工作

What it looks like

HTML

<ul> 
    <li><a href="#">TEST 1</a></li> 
    <li><a href="#">TEST 2</a></li> 
    <li><a href="#">TEST 3</a></li> 
    <li><a href="#">TEST 4</a></li> 
    <li><a href="#">TEST 5</a></li> 
    <li><a href="#">TEST 6</a></li> 
    <li><a href="#">TEST 7</a></li> 
</ul>

CSS

ul li 
{ 
    display: inline-table; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a 
{ 
    text-align: right; 
    vertical-align: bottom; 
    display: block; 
    height: 100%; 
    padding: 10px; 
}

我也尝试了几种垂直对齐和绝对定位的组合，也使用了包含a元素的包装，但没有付出任何努力。

问题

我怎么能定位在右下角的链接，而仍然在整个广场扩大a - 元素？

来源

2013-06-29 bytecode77

垂直对齐仅适用于表单元格：

ul li a { 
text-align: right; 
vertical-align: bottom; 
display: table-cell; 
height: 100%; 
padding: 10px; 
}

的jsfiddle：http://jsfiddle.net/4JMav/8/

来源

2013-06-29 21:40:45

我会将文本放在一个范围内，然后将该范围绝对定位在a范围内。 Yhis可以很容易地将其设置在右下方。

你的CSS会是这个样子：

ul li { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a { 
    display: block; 
    height: 100%; 
    position: relative; 
} 
ul li a span { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
}

和一个例子：http://jsfiddle.net/E2kfd/

来源

2013-06-29 21:40:39 Pevara

我个人不喜欢引入额外的标记来对齐。 –

@AndyG同意，但提问者明确表示他希望他的链接占据整个“li”（这是有道理的），而且你的答案并非如此。我不是'display：table -...'css的大粉丝，所以这是IMO正确的方法去... – Pevara

@PeterVT好点;） –

下面是一种方式，使用定位：

ul li 
{ 
    display: inline-table; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a 
{ 
    text-align: right; 
    display: inline-block; 
    padding: 10px; 
    position: absolute; 
    bottom: 0; right: 0; 
}

就个人而言，虽然，我可能会放弃给UL display: inline-table和使用table-cell为李家的。

jsfiddle

来源

2013-06-29 21:41:39

您需要以下变化：

ul li a 
{ 
    ... 
    display: table-cell; 
    ... 
}

（演示：http://jsfiddle.net/4JMav/6/）

垂直对齐的工作方式不同表格单元格和别的：第一个，它对齐内容，另一方面，它会对齐线框中元素的文本内容。如果将块放入（内嵌）表格中，CSS渲染器将生成具有默认垂直对齐的anonymous table cell，并将该块放入其中。但是，当您将内部元素本身转换为表格单元格时，它会应用您设置的垂直对齐。

来源

2013-06-29 21:52:36

垂直对齐的元素不工作

回答

相关问题