How to vertically center divs in my navbar

Question

My question is simple, how I'm able to vertically center divs in my navbar so they will be always in the center no matter what height of the navbar i set. I have already tried vertical-align: middle; but that didn't work for me.

HTML:

    <div class="navbar">
        <div class="buttons">
            <button class="homeButton"><i class="fas fa-home"></i></button>
            <button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
        </div>
        <div class="links">
            <a href="#">Programování</a>
            <a href="#">Anglický jazyk</a>
            <a href="#">Psychologie</a>
            <a href="#">Zdraví a psychohygiena</a>
            <a href="#">Matematika</a>
            <a href="#">Logické úlohy</a>
            <a href="#">Programy</a>
            <a href="#">Ostatní</a>
        </div>
    </div>

CSS:

.navbar {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 10px 10px;
  width: 100%;
  height: 100px;
  font-family: Open Sans;
  background: white;
  position: fixed;
}

.buttons {
  float: left;
}

.links {
  float: right;
}

score -1 · Answer 1 · answered Sep 16 '21 at 14:01

You could try to place the items halfway down a div. e.g.

.verticalCenter {
    top: 50%;
}

then just add it to the buttons div.

    <div class="buttons verticalCenter"> <!-- added here -->
        <button class="homeButton"><i class="fas fa-home"></i></button>
        <button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
    </div>

score -1 · Answer 2 · answered Sep 16 '21 at 14:02

-1

You can use flexbox.

.navbar {
  /*rest of your code*/
  display: flex;
  justify-content: center;
  align-items: center; 
}

answered Sep 16 '21 at 14:02

Kaper365

355
3
14

score -1 · Accepted Answer · answered Sep 16 '21 at 14:04

-1

using float for this is a deprecated solution, better to do it like this:

.navbar {
   display: flex;
   justify-content: center;
   align-items: center;
}

answered Sep 16 '21 at 14:04

Serg Bakay

87
4

Thank you, it helped me a lot. I just used align-items: space-between; and then marge my divs to make one on the left and the other one on the right. – Uchiha Obito Sep 16 '21 at 14:23

How to vertically center divs in my navbar

3 Answers3