How to center the text vertically inside a bigger ?

Question

Here's a minimal example: (the js links are from bootstrap, https://getbootstrap.com/docs/4.4/getting-started/download/ you can recopy-paste them if you don't trust them).

body {
  background-color: black;
}

#nav {
  background-color: blue;
  margin: 0;
  padding: 0;
  height: fit-content;
}

#nav a {
  background-color: white;
  height: 75px;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
  <div id="nav" class="navbar fixed-bottom nav-fill">
    <a class="nav-item nav-link" href="#">test</a>
  </div>
</body>

</html>

The reason I want the to be big and the text in the center of it is because I want to change the background color of it when the user hovers over it and also when the mouse is down on the link, so covering it in a isn't an option. Thanks!

Hi, Is that the real code? If It is, you should put your styles in the element. — Lucas David Ferrero, Mar 20 '20 at 15:09
@LucasDavidFerrero No, this is a minimal example, real code is in angular, stylings are in separate files. — Waseem, Mar 20 '20 at 15:18

score 1 · Accepted Answer · answered Mar 20 '20 at 15:19

1

One way to achieve a centered text inside an element It's to use Bootstrap's utilities. You could use flex's utilities in this case. Add the follow to your element:

<a class="nav-item nav-link d-flex justify-content-center align-items-center" href="#">test</a>

Here I'm saying that the element will be a display flex and its content (in this case a text) will have justify-content: center and an align-items: center

You should read: Bootstrap Flex MDN: Flex

answered Mar 20 '20 at 15:19

Lucas David Ferrero

1,630
14
40

Thank you! Using the solution you mentioned worked, and through that and the link you posted I found that adding: #nav a{display: flex; justify-content: center; align-items: center;} worked as well! – Waseem Mar 20 '20 at 15:26

How to center the text vertically inside a bigger ?

1 Answers1