在同一行中排列文本和圖像

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

Answer 2

您需要使用浮點數，因此在CSS中的某個位置會將該圖像右移（float：right;）。