Question

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

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

Fiddle

这里发生了两件事。首先，我试图在div中垂直居中图像和文本，这不希望工作得很好，出于某种原因，文本被推到底部而图像则被推到顶部。

正在发生的第二个神秘事物是图像周围的灰色框架，我不知道它来自哪里。如果我在html中使用<img src= >并带有指向图像的链接，则灰框会消失。

非常感谢任何帮助

Answer 1

这就是Fiddle

之后的情况

以我添加的文本为中心-float：

.make-main {    
    position: relative;
    width: 28px;
    height: 28px;   
    float:right;
    background: white url(http://imgur.com/Iz7GKQf) right center no-repeat;
}

并且

.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;    
    height:30px;
}

就灰色框架而言，我不确定灰色框架出现的原因。

Answer 2

怎么样，把它放在你的CSS文件中：

.new rounded
{
   margin-left: auto;
   margin-right: auto;
}

这是为了将图像置于div中。

要删除图像边框，还要输入：

 img {border:0;}

但是因为你的图像元素附加了一个类，所以这可能会更好：

.make-main img {border:0;}

Answer 3

http://jsfiddle.net/a3GrP/

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

.make-main {    
    width: 28px;
    height: 28px;   
    border-color: none;
    background: white url('http://imgur.com/Iz7GKQf') right center no-repeat;
}

.inline {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;    
}

.center-left {  
    float: left;
    height: 30px;}

.new {  
    width: 200px;   
    text-align: center; 
    cursor: pointer;    
    border: 1px solid #3981d2;      
}

你走了。

垂直对齐中间作品基于基线。因此，您需要父元素的行高。

关于灰色边框 - 仅限于jsfiddle？

Answer 4

灰色边框来img标记其Chrome浏览器的默认行为所以我们无法删除那个灰色边框谢谢您可以参考以下链接 Stackoverflow

Answer 5

如果您将图像和文本垂直对齐到中间：

<强> 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

Answer 6

他们的灰色边框是因为，它只是图像页面的链接。因此，从嵌入代码中，您必须获得与extensioni

的精确图像链接

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

6 个答案: