html - 无法在图像旁边放置 div 或按钮

Question

我试图将“查看我的简历”div 放在 linkedin 图片旁边，但 div 位置有点向下。我试过使用 float 和 inline-block，但 div 总是比图像稍微向下。

快照:

html:

<div id="DIV_1">

        <a href="" style="text-decoration:none;">
            <img src="linkedin.png" style="display: inline-block;">            
        </a>

        <div id="BUTTON_4" style="display: inline-block;">
            <span id="SPAN_5">View my Resume</span>
        </div>

</div>

CSS:

#DIV_1 {
    margin: 0 auto;
    color: rgb(34, 34, 34);
    text-align: center;
    text-decoration: none solid rgb(34, 34, 34);
    white-space: nowrap;
    width: 572px;
    border: 0px none rgb(34, 34, 34);
    font: normal normal normal 13px/normal Arial, sans-serif;
    outline: rgb(34, 34, 34) none 0px;
}

#SPAN_5 {
    color: rgb(68, 68, 68);
    cursor: default;
    text-align: center;
    text-decoration: none solid rgb(68, 68, 68);
    vertical-align: top;
    white-space: nowrap;
    align-self: flex-start;
    border: 0px none rgb(68, 68, 68);
    font: normal normal bold 12px/27px Arial, sans-serif;
    outline: rgb(68, 68, 68) none 0px;
}

#BUTTON_4 {
    color: rgb(68, 68, 68);
    height: 29px;
    min-width: 54px;
    text-decoration: none solid rgb(68, 68, 68);
    white-space: nowrap;
    width: 114px;
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(241, 241, 241)) repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgba(0, 0, 0, 0.0980392);
    border-radius: 2px 2px 2px 2px;
    font: normal normal bold 11px/29px Arial;
    margin: 16px 8px;
    outline: rgb(68, 68, 68) none 0px;
    padding: 0px 8px;
}

演示:http://jsfiddle.net/tCrC3/

Answer 1

添加vertical-align (值为 middle)到 img 的样式:

<img src="http://placehold.it/40x40" style="vertical-align: middle;">

Fiddle .