將圖像與CSS中的文本對齊

-2

我想將此圖像與框中的文本對齊。 CSS的盒和圖像：將圖像與CSS中的文本對齊

#msg_b { 
    word-wrap: break-word; 
    background:#fefefe; 
    padding:5px; 
    min-height:15px; 
    margin-bottom:5px; 
    position:relative; 
    margin-left:30px; 
    border-radius:5px; 
    border: 1px solid #d5d5d5; 
} 
.avatar { 
    width: 25px; 
    height: 25px; 
    vertical-align:middle; 
}

和結果，圖像不能與盒對齊。請幫忙！

來源

2015-11-12 Cát Tường Vy

請發表您的HTML。 – Alex

我沒有權利發佈圖片，所以請爲我測試！因爲我的聲望在10以下 –

我認爲你拼錯'avatar' ... :) –

你應該嘗試創建一個div，並把你的文字和你的圖像與你提供的風格一樣。

類似：

<div id="msg_b">Your text goes here 
    <img src="YOUR_IMAGE_URL" class="avartar" /> 
    </div>

圖像的位置，可以從右變到左增加

float:left;

的風格類圖像。這對我有用。希望能幫助到你。

來源

2015-11-12 13:46:46 UgoM

哇！有用！謝謝！ –

你必須保持自己的位置，以內嵌塊或內聯，然後設置垂直對齊！

img { 
 
    max-width: 200px; 
 
    vertical-align: middle; 
 
    border: 1px solid black; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    
 
    padding: 1em 2em; 
 
    border: 1px solid black; 
 
}

<div> 
 
    <img src="https://pixabay.com/static/uploads/photo/2014/04/20/12/30/thumb-328420_640.jpg" /><span>Good Job</span> 
 
</div>

來源

2015-11-12 13:32:49 Hitmands

嘗試了這一點（添加display:block這兩個元素）：

#msg_b{ 
    display: block; 
    word-wrap: break-word; 
    background:#fefefe; 
    padding:5px; 
    min-height:15px; 
    margin-bottom:5px; 
    position:relative; 
    margin-left:30px; 
    border-radius:5px; 
    border: 1px solid #d5d5d5; 
    vertical-align:middle; 
} 
.avatar { 
    display: block; 
    width: 25px; 
    height: 25px; 
    vertical-align:middle; 

}

DEMO HERE

來源

2015-11-12 13:34:57

問題是，如果第二個頭像顯示，然後它是在同一行，我想把n頭像到新行。請幫忙！ –

我更新了我的回答基準 –

將圖像與CSS中的文本對齊

回答

相關問題