元素的垂直对齐不起作用 [英] vertical-align of element not working

问题描述

我试图实现的是一组内部带有链接的元素（框）。此链接应位于右下角，但vertical-align属性不起作用

jsFiddle： http://jsfiddle.net/4JMav/

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纯黑色; 
} 
 ul li a 
 {
 text-align：right; 
 vertical-align：bottom; 
 display：block; 
身高：100％; 
 padding：10px; 
} 
  

我也试过了垂直对齐和绝对位置的几种组合，在 a -element周围，无需付出努力。

问题

如何将链接放置在右下方，同时仍然在整个正方形上展开 a -lelement？

解决方案

Vertical-align仅适用于表格单元：

  ul li a {
 text-align：right; 
 vertical-align：bottom; 
 display：table-cell; 
身高：100％; 
 padding：10px; 
} 
  

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

What I'm trying to achieve is a set of elements (boxes) with a link inside. This link should be on the bottom right, but the vertical-align property is not working

jsFiddle: http://jsfiddle.net/4JMav/

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;
}

I also tried several combinations of vertical-align and absolute positioning, also using wrappers around the a-element, with no effort yet.

Question

How can I position the link on the bottom right, while still expanding the a-element over the entire square?

解决方案

Vertical-align works only with table-cell:

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

JSFiddle: http://jsfiddle.net/4JMav/8/

这篇关于元素的垂直对齐不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！