如何在<h1>标签内垂直对齐图片

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;
}  

如何使图片 goldT 与标题文本 abc 垂直居中。

这里是 JSFIDDLE

- qadenza

---

问题很棒...... - Dinesh Kanivu

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。

- codingrose

Answer 2

一个更简单的解决方案如下：

在h1标签中设置line-height属性，在图片和span标签中设置vertical-align:middle;属性。这对我起作用了。

- Ukuser32

Answer 3

尝试这个，我们可以使图像垂直居中。

尝试这个 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; }

- Dinesh Kanivu

Answer 4

编辑于2023/03/03：

现在有更好的对齐元素的方法：

h1 {
    display: flex;
    align-items: center;
} 

CSS Grid 也可以使用，尽管我认为它不是最适合这种情况的。

---

原始答案：

只需将文本与图像一起包装到<span>中：

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

代码片段

- Morpheus

---

在这种情况下，Morpheus，文本“abc”不在标题的左侧。文本应该在左边，图像在右边。 - qadenza

在这种情况下，将文本和图像分别包装成不同的span元素并浮动它们。示例->http://jsfiddle.net/KKgYa/13/ - Morpheus

Answer 5

你需要为 <h1> 设置 CSS 的显示样式和垂直对齐方式。

查看演示：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;
}

- Bhavesh Kachhadiya

Answer 6

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

样例

- Aldi Unanto

---

如果h1的高度更高，那么这不能算作一个答案。请查看此链接http://jsfiddle.net/KKgYa/11/以了解其影响。 - Dinesh Kanivu