Question

我试图创建一个包含文字和图片的栏。我的问题是文本没有与图像垂直对齐。我试着这样做没有成功。

<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

这样做的正确方法是什么？感谢

Answer 1

它们目前按基线对齐，文字的底部将与图像底部垂直对齐。将您的元素垂直对齐在顶部：

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

JSFiddle

Answer 2

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垂直对齐文本与图像

2 个答案: