我最好不要在1 div的已居中徽标下方将文本居中,而最好创建2 div,并将徽标在顶部div的底部居中,将文本在底部div的顶部居中?我设法将徽标居中在页面中心,但是只能将文本居中在屏幕顶部。我想放在徽标下。
.home-logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.homepage {
position: relative;
width: 100%;
height: 100%;
}
.home-text {
font-size: 28px;
color: #000;
text-align: center;
padding-bottom: 20px;
}
<div class="homepage">
<img src="assets/img/home-logo.png" class="home-logo">
<p class="home-text"><a href="geelong.html">Geelong</a></p>
<p class="home-text"><a href="ballarat.html">Ballarat</a></p>
</div>
答案 0 :(得分:2)
您可以使用Flex
.home-logo {
align-self: center;
width: 50px;
}
.homepage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.home-text {
font-size: 28px;
color: #000;
text-align: center;
}
<div class="homepage">
<img src="https://via.placeholder.com/200x150" class="home-logo">
<p class="home-text" style="padding-top: 25px;"><a href="geelong.html">Geelong</a></p>
<p class="home-text"><a href="ballarat.html">Ballarat</a></p>
</div>
答案 1 :(得分:1)
您可以使用flexbox,而不再需要绝对定位。
.home-logo {
margin: 0 auto;
}
.homepage {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.home-text {
font-size: 28px;
color: #000;
text-align: center;
}
<div class="homepage">
<img src="https://via.placeholder.com/100x100" class="home-logo">
<p class="home-text"><a href="geelong.html">Geelong</a></p>
<p class="home-text"><a href="ballarat.html">Ballarat</a></p>
</div>
答案 2 :(得分:0)
.home-logo{
height: 100px;}
.homepage{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;}
.home-text{
font-size: 28px;
color:#000;
text-align: center;}
<div class="homepage">
<img src="assets/img/home-logo.png" class="home-logo">
<p class="home-text"><a href="geelong.html">Geelong</a></p>
<p class="home-text"><a href="ballarat.html">Ballarat</a></p>
</div>