html - 将图像与文本垂直对齐到底部

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