html - 将文本和图像排列在同一行

Question

这个问题已经回答了很多次，但是没有一个解决方案适用于我的问题。我有一些文本和图像要线性对齐(在一行中)

我有http://grab.by/vLz2和 http://grab.by/vLz8

有人可以帮忙吗？

Answer 1

您需要确保图像高度与字体大小相同。

.title{
   position:absolute;
   height: 15%;
   width:100%;
}

#wrapper{
    position:absolute;
    width:80%;
    height:50%;
    border: solid 1px black;
}

#title4{
    font-size:20px;
}

<!-- HTML part -->
<div class="title" id="title4">
    Title
    <img src="https://www.google.com/images/srpr/logo11w.png" 
         style="height:20px;vertical-align:top;"/> 
</div>

检查这个JSFiddle