无法在图像旁边放置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

Answer 2

首先，你应该把这个结构放在UL和LI元素（列表）中。

但是谈到你的具体问题，CSS在垂直对齐方面仍然没有效率。所以，你的按钮是向下的，因为它有一些余量（“边距：16px 8px;”）所以你需要删除它或将它添加到图像中。

我希望它有所帮助。