我希望文本在狗的旁边,但是当我使用< 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>
答案 0 :(得分:2)
问题是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>
&#13;
或者,您可以使用浮动(允许您的内容紧挨着显示)和 flex 以确保文本垂直集中:< / p>
.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;
请注意,您的段落和图片位于(未关闭)<h1
&gt;标签,我已经为了我的例子而删除了。 <h1>
保留用于标题文本。我假设您希望文本具有标题样式,因此我已在示例中将<p>
标记替换为<h1>
标记。
希望这有帮助! :)
答案 1 :(得分:2)
您只需要包装文本并使用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>
&#13;