html - 在 div 中居中 href 和图像并删除图像边框

Question

我正在努力解决这个问题:

<div class="center-left">               
    <div class="new rounded">
    <span class="inline"></span>TEXT<img class="make-main"></div>
</div>

Fiddle

这里发生了两件事。首先，我试图在 div 中将图像和文本垂直居中，但由于某种原因，文本被推到底部而图像被推到顶部，效果不太好。

发生的第二个谜是图像周围的灰色框，我不知道它来自哪里。如果我使用 <img src= >在带有图像链接的 html 中，灰框消失了。

任何帮助将不胜感激

Answer 1

如果您将图片和文字垂直居中对齐:

HTML

<div class="center-left">
    <div class="new rounded"> 
        <span class="inline">TEXT</span>
        <img class="make-main" src="http://imgur.com/Iz7GKQf.png" />
    </div>
</div>

CSS

.make-main {
    width: 28px;
    height: 28px;
    border-color: none;
    vertical-align:middle;
}
.inline {
    display: inline-block;
    vertical-align: middle;
}

它应该可以工作:Example

Example using background image