将带有文本的图像垂直对齐到底部

Question

标记：

<ul class="navigation">
    <li class="selected">
        <img src="Images/thumb1selected.png" />
        <p><a>Image 1</a></p>
    </li>
    <li>
        <img src="Images/thumb2.png" />
        <p><a>Image 2</a></p>
    </li>
    <li>
        <img src="Images/thumb3.png" />
        <p><a>Image 3</a></p>
    </li>
</ul>

CSS：

.navigation 
{
    list-style-type: none;
    height: 140px;
    width: 100%;
}
.navigation li
{
    float: left;
    cursor: pointer;
    position:relative;
    height: 140px; 
    width: 120px; 
}
.navigation li>img
{
    display: block; 
    position: absolute; 
    bottom: 0;
}
.navigation li>p
{
    padding-left: 25px;
}

这就是结果。

图像正确对齐底部。但我希望文本低于图像而不是图像上方。我该如何更改CSS才能实现这一目标？

Answer 1

如果不改变html，你可以这样做：

.navigation 
{
    list-style-type: none;
    height: 140px;
    width: 100%;
}
.navigation li
{
    float: left;
    cursor: pointer;
    position:relative;
    height: 140px; 
    width: 120px; 
}
.navigation li>img
{
    display: block; 
    position: absolute; 
    bottom: 30px;
}
.navigation li>p
{
    padding-left: 25px;
    position: absolute;
    bottom: 0px;
}

如果文字很长，这不会重新调整大小。

如果您愿意/愿意更改html，我会更像这样：

<ul class="navigation">
    <li class="selected">
        <div class="imageContainer">
            <img src="Images/thumb1selected.png" />
        </div>
        <p><a>Image 1</a></p>
    </li>
    <li>
        <div class="imageContainer">
             <img src="Images/thumb2.png" />
        </div>
        <p><a>Image 2</a></p>
    </li>
    <li>
        <div class="imageContainer">
            <img src="Images/thumb3.png" />
        </div>
        <p><a>Image 3</a></p>
    </li>
</ul>

使用CSS：

.navigation 
{
    list-style-type: none;
    height: 140px;
    width: 100%;
}
.navigation li
{
    float: left;
    cursor: pointer;
    width: 120px;
}
.navigation .imageContainer
{
    height: 140px; 
    width: 120px;
    position:relative;
    float: left;
}
.navigation li>img
{
    display: block; 
    position: absolute; 
    bottom: 0;
}
.navigation li>p
{
    padding-left: 25px;
    clear: left;
}

Answer 2

将CSS样式更改为：

.navigation li>img
{
    display: block; 
    position: absolute; 
    top:0;
}
.navigation li>p
{
    padding-left: 25px;
    position:absolute;
    bottom:0;
}

请参阅http://jsfiddle.net/rctjS/。

这不适用于bottom:20，因为您必须在px，cm等中设置下边缘位置。允许使用负值。例如：bottom:20px