Question

HTML

<h1>abc abc<span><img class="goldT" src="btns/nav02.png"></span></h1>

CSS

h1{
    margin:15px 0 15px 20px;
    font-size:1.1rem;
    font-weight:bold;
    background:#e1e1e1;
    padding-left:10px;
    color: #444444;
}
h1 span{
    float:right;
    margin-right:14px;
}
h1 .goldT{
    width:140px;
    vertical-align:middle;
}

如何将img goldT垂直居中于标题文字abc。

Here is the FIDDLE

Answer 1

尝试：

HTML：

<h1>
    <span class="text">abc abc</span><span class="span">
        <img class="goldT" src="https://www.google.com/images/srpr/logo11w.png">
    </span>
</h1>

CSS：

.span, .text {
    vertical-align:middle;
    display:table-cell;
}
h1 {
    display:table;
    width:100%;
}

Fiddle here.

Answer 2

在这里尝试这个我们可以使图像垂直居中

试试这个http://jsfiddle.net/SxxWV/10/

HTML

<div class="main">
<div class="box"><img  src="https://www.google.com/images/srpr/logo11w.png" />
</div>   
</div>

CSS

.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:transparent; }

/* for centering */
img{width:100px}
.box { display: inline-block; width:100px }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }

Answer 3

更简单的解决方案如下：

<h1><span>abc abc</span><img class="goldT" src="btns/nav02.png"></h1>

在h1上设置line-height并在图片和范围设置vertical-align:middle;。为我工作。

Answer 4

只需将文字与图片一起打包到<span>：

<h1>
    <span>
        abc abc
        <img class="goldT" src="https://www.google.com/images/srpr/logo11w.png">    
    </span>
</h1>

FIDDLE

Answer 5

您需要为<h1>

设置css显示样式和vertical-align

请参阅演示：http://jsfiddle.net/BhaveshKachhadiya/REHLZ/3/embedded/result/

h1 的Css：

h1{
    margin:15px 0 15px 20px;
    display:table-cell;
    vertical-align:middle;
    font-size:1.1rem;
    font-weight:bold;
    background:#e1e1e1;
    padding-left:10px;
    color: #444444;
}

Answer 6

使用margin-top。例如：margin-top: -13px;

Sample

如何在<h1>标记</h1>内垂直对齐图像

6 个答案: