我似乎想不出一种方法来垂直堆叠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>
一个工作示例:
目标是将两个div垂直和水平居中放置时,“ 50%”文本位于图像下方。图像大小将是动态的,因此我不能只将所有内容设置为固定的宽度/高度并使用填充。
答案 0 :(得分:3)
将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>
答案 1 :(得分:2)
您在这里! 提示:请勿使用pixel(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>