Question

我最好不要在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>

Answer 1

您可以使用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>

Answer 2

您可以使用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>

Answer 3

.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>

在已经居中的徽标下将文本对齐到div的中心

3 个答案: