無法對齊垂直元素-有解無憂

首先，圖示和標簽正確居中。但我需要制作錨點display: inline-block;以使可點擊區域成為其所在網格的完整大小。只有標簽本身居中，而圖示位于標簽上方。

我嘗試使用vertical-align: middle;and align-items: centre;。

如何使圖示和標簽垂直對齊？

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
body {
  display: grid;
  grid-template-rows: 15% 70% 15%;
  grid-auto-columns: 1fr 1fr;
  gap: 0% 0%;
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
  background-color: rgb(224, 224, 224);
  height: 100vh;
}

#header {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "back welcome logout";
  grid-area: 1 / 1 / 2 / 2;
  position: fixed;
  width: 100%;
  height: 15%;
  background-color: rgb(255, 255, 255);
  align-items: center;
  text-align: center;
}

#back {
  grid-area: back;
}

#welcome {
  grid-area: welcome;
}

#logout {
  grid-area: logout;
}

#content {
  grid-area: 2 / 1 / 3 / 2;
}

#footer {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "home contact";
  grid-area: 3 / 1 / 4 / 2;
  text-align: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 15%;
  background-color: rgb(255, 255, 255);
}

#home {
  grid-area: home;
}

#contact {
  grid-area: contact;
}


/* centre alignment for icon and label */

#back,
#logout,
#home,
#contact {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: rgb(58, 58, 255);
  display: inline-block;
  width: 100%;
  height: 100%;
}


/* clickable size for icon and label */

#header a,
#header span,
#footer a,
#footer span {
  font-size: 1.5em;
  text-decoration: none;
}


/* hover for icon and label */

#header a:hover,
#footer a:hover {
  background-color: rgb(216, 237, 255);
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
  <link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

<body>

  <div id="header">

    <a href="#" id="back">
      <span class="material-symbols-outlined">
            arrow_back
        </span><br/> Back
    </a>

    <h1 id="welcome">Timeline</h1>

    <a href="#" id="logout">
      <span class="material-symbols-outlined">
            logout
        </span><br/> Logout
    </a>

  </div>

  <div id="content">
    <p>hello</p>
  </div>

  <div id="footer">

    <a href="#" id="home">
      <span class="material-symbols-outlined">
            home
        </span><br> Home
    </a>

    <a href="#" id="contact">
      <span class="material-symbols-outlined">
            chat
        </span><br> Contact
    </a>

  </div>

</body>

</html>

uj5u.com熱心網友回復：

就個人而言，我更喜歡在嘗試垂直對齊時使用 flex。這里有一個關于如何使用它的例子：

div {
margin-bottom: 10px
}

.vertical {
display: flex;
align-items: center;
height: 175px;
width: 175px;
background-color: yellow;
}

.horizontal {
display: flex;
justify-content: center;
height: 175px;
width: 175px;
background-color: red;
}

.both {
display: flex;
justify-content: center;
align-items: center;
height: 175px;
width: 175px;
background-color: blue;
color: white;
}

<div class="vertical">
  vertical
</div>

<div class="horizontal">
horizontal
</div>

<div class="both">
horizontal and vertical
</div>

uj5u.com熱心網友回復：

首先，您需要更正<a>s 的 HTML 結構。

去掉<br>標簽，把標簽放在自己的<span>s中。

<a href="#" id="home">
    <span class="material-symbols-outlined">
        home
    </span>
    <span>Home</span>
</a>

現在他們的造型更容易了。以下屬性是您需要為鏈接規則設定的內容：

更改display: inline-block為display: flex。

display: flex將使<a>s將 s 保存<span>在回應式容器中，同時假設塊級元素角色很好地位于為其計算的寬度中。
flex-direction: column<span>將垂直堆疊s。
justify-content: center使專案垂直居中。

在垂直放置（即flex-direction: column）中，align-items和justify-content屬性被交換，因為您將主軸從水平更改為垂直。為此，我們使用justify-content: center而不是align-items: center將專案垂直居中。

您可能會擺脫其他屬性，因為它們不是必需的，并會引入問題和不必要的復雜性。

新規則集：

#back,
#logout,
#home,
#contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgb(58, 58, 255);
  border: 1px solid;
}

因為圖示和標簽現在位于不同的中<spans>，所以您可以設定它們的樣式以占據全寬并從它們自己的內容中獲取它們的高度，如下所示：

#back span,
#logout span,
#home span,
#contact span {
  display: block;
  width: 100%;
  height: auto;
}

我還注意到你的標題欄會改變它的高度，當我打開開發工具時螢屏調整大小會變短，所以你可以通過設定固定高度而不是百分比高度來糾正這個問題。

#header {
    ...
    height: 100px;
    ...
}

uj5u.com熱心網友回復：

<div class="outer">
<h1>Test</h1>
</div>

<style>
.outer{position: relative;}
h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478807.html

標籤：html css

上一篇：如何在回應式桌面視圖中設定4列

下一篇：如何將標簽與復選框關聯但不使用“for=id”