在圖像旁邊保留內嵌塊文本

Question

我試圖在固定寬度的容器div內的圖像旁放置一些文本。爲此，我在文本上使用display: inline-block。這工作時，文字很短，但是當它變得比格不再只是向下移動所看到的這個片段：

.container { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    border: 1px solid red; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    vertical-align: middle; 
 
    
 
} 
 

 
.text-container { 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/> 
 
    <div class="text-container">I AM TEXT</div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/> 
 
    <div class="text-container">I AM TEXT OH NOOO</div> 
 
</div>

我想達成什麼是這樣的：

，使文本還是垂直中間對齊和旁邊的圖像。

有什麼辦法可以達到這個目的嗎？

Answer 1

img是嵌入式元素，而.text-container是嵌入式塊。當內聯元素無法放入當前行時，行會中斷，並且元素將移至下一行。

爲了防止在.container上設置white-space: nowrap。要啓用.text-container中的包裝，請定義其寬度，並將空白行爲恢復爲普通（換行）。

.container { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    border: 1px solid red; 
 
    white-space: nowrap; /** force the elements to stay side by side **/ 
 
} 
 

 
img { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    vertical-align: middle 
 
} 
 

 
.text-container { 
 
    display: inline-block; 
 
    width: calc(100% - 60px); /** containers width - img width - margin-left **/ 
 
    margin-left: 10px; 
 
    white-space: normal; 
 
    vertical-align: middle 
 
}

<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" /> 
 
    <div class="text-container">I AM TEXT</div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" /> 
 
    <div class="text-container">I AM TEXT OH NOOO</div> 
 
</div>

但是，你甚至可以進一步利用Flexbox，就與align-items: center簡化結構：

.container { 
 
    display: flex; /** set the container as flexbox **/ 
 
    align-items: center; /** align all items vertically **/ 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    border: 1px solid red; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
} 
 

 
.text-container { 
 
    margin-left: 10px; 
 
}

<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" /> 
 
    <div class="text-container">I AM TEXT</div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" /> 
 
    <div class="text-container">I AM TEXT OH NOOO</div> 
 
</div>

，並通過使用Flexbox的，你也可以將帶有邊框的圖像移動到的背景獲得單個div解決方案。

.container { 
 
    display: flex; /** set the container as flexbox **/ 
 
    align-items: center; /** align all items vertically **/ 
 
    box-sizing: border-box; /** the padding and the border are part of the width **/ 
 
    width: 202px; 
 
    min-height: 54px; 
 
    margin-bottom: 10px; 
 
    padding-left: 60px; /** save space for the image and the margin between the image and the text **/ 
 
    border: 1px solid red; 
 
    /** set the image and the image border as backgrounds **/ 
 
    background: radial-gradient(circle at center, transparent 0, transparent 24px, black 24px, transparent 26px), url(http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png); 
 
    /** set the backgrounds size **/ 
 
    background-size: 51px 51px, 50px 50px; 
 
    background-repeat: no-repeat; /** prevent the backgrounds from repeating themselves to fill the container **/ 
 
    background-position: left center; /** position them in relation to the container **/ 
 
}

<div class="container"> 
 
    I AM TEXT 
 
</div> 
 

 
<div class="container"> 
 
    I AM TEXT OH NOO 
 
</div>

Answer 2

你會得到這個，因爲div自動把自己放在換行符上。如果在文本週圍使用<span>標籤，它應該與圖像顯示在同一行上。

嘗試更換：

<div class="text-container">I AM TEXT OH NOOO</div> 

有：

<span class="text-container">I AM TEXT OH NOOO</span> 

希望幫助！

Answer 3

一種解決方案是浮動圖像，並在text-container上使用display: block。如果文字變得足夠大，文本會在文字下方顯示。我還將margin樣式移動到圖像上，您可以進一步調整間距。

.container { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    vertical-align: middle; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.text-container { 
 
    display: block; 
 
}

<div class="container"> 
 
<img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/> 
 
<div class="text-container">I AM TEXT OH NOOO</div> 
 
</div>

既然一切是固定的大小，你也可以讓事情作爲inline-block，但你的文字容器上使用固定width。