css - CSS垂直对齐文字和图片

我正在尝试创建一个包含文本和图像的栏。
我的问题是文本未与图像垂直对齐。
我以这种方式尝试没有成功。

<div class="bar">
   <span class="strip">DOWNLOAD</span>
   <span class="divider"></span>
   <span class="strip">SUBMIT</span>
   <span class="divider"></span>
</div>

的CSS

.bar {
   width: 100%;
   height: 20px;
   background: #c6d4db;
 }

.strip {
   display: inline-block;
   height: 20px;
   line-height: 20px;
   background: #c6d4db;
   font-family: 'OpenSans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 10px;
 }

.divider {
   display: inline-block;
   height: 20px;
   line-height: 20px;
   width: 18px;
   background: url("http://cdn.imghack.se/images/9d5972b90a4390e90f99530d7915c07b.png") no-repeat center;
 }

JSfiddle

正确的方法是什么？
谢谢

最佳答案

vertical-align:top;是您要寻找的。

这是一个更简单的方法：)

第一个例子

将高度更改为20px

Have a fiddle!

的HTML

<div class="bar">
    <a>DOWNLOAD</a>
    <a>SUBMIT</a>
</div>

的CSS

    .bar {
    background: #c6d4db;
    padding: 0;
    margin: 0;
}

.bar a {
    display: inline-block;
    vertical-align:top;
    background: #c6d4db url("http://cdn.imghack.se/images/9d5972b90a4390e90f99530d7915c07b.png") no-repeat right;
    font-family:'OpenSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    padding: 0 20px 0 5px;
}

这是:after的另一种方式:)

第二个例子

Have a fiddle!

的HTML

<div class="bar">
    <a>DOWNLOAD</a>
    <a>SUBMIT</a>
</div>

的CSS

.bar {
    background: #c6d4db;
    padding: 0;
    margin: 0;
}

.bar a {
    display: inline-block;
    vertical-align:top;
    background: #c6d4db;
    font-family:'OpenSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    height: 18px;
    line-height: 20px;
    padding: 0 0 0 5px;
}

.bar a:after {
    display: inline-block;
    vertical-align:top;
    content:"";
    height: 18px;
    width: 18px;
    background: url("http://cdn.imghack.se/images/9d5972b90a4390e90f99530d7915c07b.png") no-repeat center;
}

关于css - CSS垂直对齐文字和图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24138332/