Всем привет! Вот есть такая структура:
<div class="box">
<img src="jpg.jpg">
<span>123</span>
</div>
Как мне сделать так, чтобы тег span
был на картинке? Если можно то без position:absolute
Всем привет! Вот есть такая структура:
<div class="box">
<img src="jpg.jpg">
<span>123</span>
</div>
Как мне сделать так, чтобы тег span
был на картинке? Если можно то без position:absolute
Работает при любом размере экрана
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.picText {
display: flex;
width: 300px;
}
.picText > span {
position: absolute;
margin-top: 200px;
margin-left: 70px;
font-size: 30px;
}
<body>
<div class="picText">
<img src="http://placehold.it/300/cc0" alt="">
<span>lorem ipsum</span>
</div>
</body
Второй вариант:
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.picText {
display: flex;
justify-content: center; /*Выравнивание по горизонтали*/
align-items: center; /*Выравнивание по вертикали*/
width: 300px;
height: 300px;
background-image: url("http://placehold.it/300/cc0");
background-repeat: no-repeat;
background-size: cover;
}
.picText > span {
margin-top: 100px;
font-size: 29px;
}
<body>
<div class="picText">
<span>lorem ipsum</span>
</div>
</body
смотреть на всё страницу
div {
margin: 50px;
}
span {
display: inline-block;
transform: translate(-305px, -140px);
font-size: 50px;
font-weight: 900;
text-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
<div>
<img src="http://placehold.it/300/cc0" alt="">
<span>lorem ipsum</span>
</div>