我似乎无法找到一种方法来垂直堆叠我的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>
一个工作的例子:
目标是“50%”文本在图像下方,而两个div都是垂直和水平居中。图像大小将是动态的,因此我不能只用固定的宽度/高度设置所有内容并使用填充。
将flex-direction:column;
设为.loading-page
body{
margin:0px;
}
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.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>
干得好!提示:不要使用像素(px),它们无法响应...而是使用百分比作为度量单位以使其具有响应性。
编辑:我更新了我的答案......现在它响应了。希望能帮助到你!
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.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: static;
width: 200px;
}
.counter h1 {
color: black;
font-size: 60px;
font-weight: bold;
margin-top: 5%;
margin-bottom: -5%;
}
.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>