如何使用換行符，但將圖片與圖片保持內嵌？

我希望文本是旁邊的狗，但是當我使用< BR> ...是不言而喻的狗下如何使用換行符，但將圖片與圖片保持內嵌？

（狗顯示：inline-block的）

https://codepen.io/TylerL-uxai/pen/pweOWN

<div class="text-center"> 
    <h1> 
    <img src="https://image.ibb.co/dCx2Ck/logo.png" style="display: inline-block" /> 
    Pet Stay<br> 
    &<br> 
    Vacay 
</div>

來源

2017-06-20 Tyler L

這是因爲圖像是inline-block的，他們流動與文字，但也有寬度和高度。該圖像與「寵物逗留」文本位於同一行，但用於「＆」和「Vacay」的新行。 – Li357

問題是display: inline-block只適用於圖像，而不適用於附帶的文本。我會建議是從文本中分離出來的圖像，並給予都display: inline-block：

<div class="text-center"> 
 
    <img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" /> 
 
    <h1 style="display: inline-block"> 
 
    Pet Stay<br> & 
 
    <br> Vacay 
 
    </h1> 
 
</div>

或者，你可以利用浮，這讓你的內容並排顯示，flex確保文本垂直集中：

.text-center .left-column, .text-center .right-column { 
 
    float: left; 
 
    height: 175px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="text-center"> 
 
    <div class="left-column"> 
 
    <img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" /> 
 
    </div> 
 
    <div class="right-column"> 
 
    <h1> 
 
     Pet Stay<br> & 
 
     <br> Vacay 
 
    </h1> 
 
    </div> 
 
</div>

請注意，你有你的（未封閉）<h1>標籤，我已經爲我的例子的目的取出裏面的段落和圖像。 <h1>保留爲標題文本。我假設您希望文本具有標題樣式，因此我已在示例中用<h1>標籤替換了<p>標籤。

希望這會有所幫助！ :)

來源

2017-06-20 00:08:25

你只需要包裝你的文字，並使用inline-block爲包裝：

<div class="text-center"> 
 
    <h1> 
 
    <img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" /> 
 
    <div style="display: inline-block"> 
 
     Pet Stay 
 
     <br> 
 
     & 
 
     <br> 
 
     Vacay 
 
    </div> 
 
    </h1> 
 
</div>

來源

2017-06-20 00:11:34

如何使用換行符，但將圖片與圖片保持內嵌？

回答

相關問題