我想适合带有标题的图像答案

【问题标题】：I want to fit an image with a heading我想适合带有标题的图像
【发布时间】：2018-09-17 20:55:16
【问题描述】：

<style>

.dazzlebox{
background-image: url("img/g954.png"); 
width:30%;
margin-top:-220px;
margin-left:650px;
color:#FFFFFF;
}

我想要这样的视图， enter image description here

.dazzlebox h1{
margin-top:100px;
margin-left:70px;
}


</style>

<div class="dazzlebox" >        
          <h1>WHY YOU SHOULD GET A DAZZLE  <span class="duzzale-box" style="font-family:Coneria Script Demo" >Box</span> </h1>

                             <img src="./img/g1158.png" style="width:20px; padding-left:170px; display:inline-block;">

我想用 Box 这个词来匹配“心脏”图像。当我给出填充或边距时，它会随着标题移动。

                 </div>

【问题讨论】：

你想把它加到“盒子”这个词下面吗？
你也可以发布相关的HTML吗？还请解释一下“心”是什么意思。也许您最喜欢的图像编辑器的首选屏幕截图可能会有所帮助
通常较大的固定单元边距和填充是一个坏主意（它们不会响应式地工作）。将float: right 或position: absolute 与right: 0 结合使用会更好。
是的，我希望图像在同一行中，仅包含“Box”一词。

标签： css html twitter-bootstrap frontend

【解决方案1】：

这有帮助吗？您提供的链接已损坏

在整页中查看：

#main_container {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100vw;
  display: block;
  justify-content: center;
  align-items: center;
  align-self: center;
  font-family: Coneria Script Demo;
}

h1,
span {
  font-weight: bolder;
  text-align: center;
  font-size: 3em;
}

#container {
  text-align: center;
  height: 83%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="main_container">
  <h1>WHY YOU SHOULD GET A DAZZLE</h1>
  <div id="container"><span>BOX</span></div>
</div>

【讨论】：