Я хочу разместить изображение с заголовком - PullRequest
Новая
       36

Я хочу разместить изображение с заголовком

0 голосов
/ 17 сентября 2018 
<style>

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

Я хочу, чтобы изображение было таким же, введите описание изображения здесь 

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

The display I want

1 Ответ

0 голосов
/ 18 сентября 2018

Это помогает?Предоставленная вами ссылка не работает

Просмотреть на полной странице: 

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