Cannot align vertical elements-CodePudding

At first, the icons and label are centred correctly. But I need to make the anchor display: inline-block; to make the clickable area the full size of the grid it is in. Only the label itself is centred, while the icon is above the label.

I tried using vertical-align: middle; and align-items: centre;.

How can I make the icon and label vertically aligned?

@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 >
            arrow_back
        </span><br/> Back
    </a>

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

    <a href="#" id="logout">
      <span >
            logout
        </span><br/> Logout
    </a>

  </div>

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

  <div id="footer">

    <a href="#" id="home">
      <span >
            home
        </span><br> Home
    </a>

    <a href="#" id="contact">
      <span >
            chat
        </span><br> Contact
    </a>

  </div>

</body>

</html>

CodePudding user response：

Personally, I prefer to use flex when it is about trying to align vertically. Here you have an example on how to use it:

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 >
  vertical
</div>

<div >
horizontal
</div>

<div >
horizontal and vertical
</div>

CodePudding user response：

First, you need to correct the HTML structure of the <a>s.

Remove the <br> tags and put the labels in their own <span>s.

<a href="#" id="home">
    <span >
        home
    </span>
    <span>Home</span>
</a>

Now their styling is easier. The following properties are what you need to set for the links' rule:

Change display: inline-block to display: flex.

display: flex will make the <a>s hold the <span>s in a responsive container while assuming a block level element role that sits nicely in the width computed for it.
flex-direction: column will stack the <span>s vertically.
justify-content: center to center items vertically.

In vertical placement (i.e flex-direction: column), the align-items and justify-content properties get swapped because you are changing the main axis from horizontal to vertical. For this, we use justify-content: center rather than align-items: center to center the items vertically.

You may get rid of the other properties as they are not necessary and introduce problems and unneeded complexity.

The new rule set:

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

Because the icons and labels are now in different <spans>, you can style them to take up full width and derive their height from their own content like this:

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

I also noticed that your header bar would change its height, getting shorter with screen resize while I opened dev tools, so you may correct this by setting a fixed height rather than a percentage height.

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

CodePudding user response：

<div >
<h1>Test</h1>
</div>

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