html - 对齐元素时遇到问题

Question

您好，我在创建网站时遇到了问题。我有一个链接，旁边有一张图片。该链接将链接中的文本与图像底部对齐。我希望链接周围的框与图像底部对齐，而不需要在其下方留出 ~20px 的区域。下面是了解我的意思的代码。

HTML:

    <div id="links">
    <a href="#" class="links">Link1</a>
    <a href="#" class="links">Link2</a>
    <a href="#"><img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/0/0a/350x175.jpg" /></a>
    <a href="#" class="links">Link3</a>
    <a href="#"class="links">Link4</a>
    </div>

CSS:

#links{
    /* SIZING */
    width:70%;
    min-width:625px;
    min-height:10px;
    /* POSITIONING */
    margin-left:auto;
    margin-right:auto;
    background-color:#FF0;
}

.links {
    /* DISPLAY */
    display:inline-block;
    background-color:#CCC;
    border-radius:15px;
    box-shadow: 2px 2px 5px #888888;
    /* SIZING */
    width:calc(16.25% - 10px);
    height:50px;
    margin:5px;
    /* TEXT */
    line-height:50px;
    text-align:center;
    text-decoration:none;
    font-size:auto;
    color:#000; 
}

#logo{
    text-decoration:none;
    border:0px;
    width:calc(35% - 10px);
    padding-top:10px;
}

Answer 1

如果您将垂直对齐设置为底部，它将像这样对齐到底部；

.links {
    background-color: rgb(204, 204, 204);
    border-radius: 15px;
    box-shadow: 2px 2px 5px rgb(136, 136, 136);
    color: rgb(0, 0, 0);
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom; //// ADDED STYLE
    width: calc(16.25% - 10px);
}

Demo Here