Кажется, я не могу найти способ сложить мои div по вертикали, все еще выравнивая их по центру страницы.
Это мой текущий html:
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.loading-page .image-container {
position: relative;
display: inline-block;
}
.loading-page .image-container .image-grey {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(1);
}
.loading-page .image-container:after {
position: absolute;
content: "";
top: 0;
left: 0%;
width: var(--image-load);
height: 100%;
background-position: top left;
}
.counter {
text-align: center;
position: relative;
width: 200px;
}
.counter h1 {
color: black;
font-size: 60px;
font-weight: bold;
margin-top: -10px;
margin-bottom: -10px;
}
.counter hr {
background: #000000;
border: none;
height: 1px;
}
<div class="loading-page">
<div class="image-container" style="--image-load: 50%;">
<style>
.image-container:after {
background-image: url(http://i.imgur.com/bZt9ZwE.png);
}
</style>
<img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png" />
</div>
<div class="counter">
<h1>50%</h1>
<hr/>
</div>
</div>
Рабочий пример:
JsFiddle
Цель -чтобы текст «50%» находился ниже изображения, в то время как оба элемента делятся по центру как по вертикали, так и по горизонтали.Размер изображения будет динамичным, поэтому я не могу просто установить все с фиксированной шириной / высотой и играть с отступами.