在图像旁边保留内联块文本

Question

我试图将一些文字放在固定宽度的容器div内的图像旁边。要做到这一点，我在文本上使用display: inline-block。当文本很短但当它比div长时它会向下移动，这就像在这个片段中看到的那样：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想要达到的目标是：

因此文本仍然在图像的中间和旁边垂直对齐。

有没有办法实现这个目标？

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>

但是，您可以使用带有align-items: center的Flexbox：

进一步简化结构

.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，您还可以将带有边框的图像移动到.container的背景，以获得单个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

一种解决方案是浮动图片，并在display: block上使用text-container。如果文字足够大，那将把文字包裹在图像下方。我还将margin样式移动到图像，您可以进一步调整间距。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

由于所有内容都是固定大小，您还可以将内容保留为inline-block，但在文本容器上使用固定的width。

Answer 3

你得到这个是因为div会自动将自己置于换行符上。如果您在文本周围使用<span>标记，则它应与图像显示在同一行。

尝试更换：

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

使用：

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

希望有所帮助！