如何使用换行符但保持文本与图像内联?

时间:2017-06-20 00:04:21

标签: html css

我希望文本在狗的旁边,但是当我使用< br> ...它在狗的下面

(狗显示:内联块)

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>

2 个答案:

答案 0 :(得分:2)

问题是display: inline-block仅适用于图像,而不适用于随附文本。我建议将图片与文字分开,并提供两者 display: inline-block

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

或者,您可以使用浮动(允许您的内容紧挨着显示)和 flex 以确保文本垂直集中:< / p>

&#13;
&#13;
.text-center .left-column, .text-center .right-column {
  float: left;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
}
&#13;
<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>
&#13;
&#13;
&#13;

请注意,您的段落和图片位于(未关闭)<h1&gt;标签,我已经为了我的例子而删除了。 <h1>保留用于标题文本。我假设您希望文本具有标题样式,因此我已在示例中将<p>标记替换为<h1>标记。

希望这有帮助! :)

答案 1 :(得分:2)

您只需要包装文本并使用inline-block作为包装器:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;