How to align my text in the middle without tricks like "padding"?

Question

I've been trying to make a nice drop-down menu, but the text is always on top! I want to align it in the centre, but "vertical-align" seems useless!

P.S. I haven't made any HTML/CSS codes for about a year or more and forgot almost everything about CSS. So some parts of CSS code are taken from the Internet. If there is something unnecessary, tell me please!

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}

#navbar li:hover ul {
  display: block;
}

#navbar,
#navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#navbar {
  height: 100px;
  width: 100%;
}

#navbar li {
  float: left;
  position: relative;
  height: 100%;
  width: 25%;
}

#navbar li a {
  display: block;
  height: 100px;
  text-align: center;
}

#navbar ul li {
  float: none;
}

#navbar li:hover {
  background-color: #6da3a3;
}

#navbar ul li:hover {
  background-color: #6da3a3;
}

#vnavbar li {
  width: 100%;
  height: 100px;
}

#vnavbar ul {
  width: 100%;
}

#vnavbar {
  width: 100%;
}

<ul id="navbar">
  <li><a href="#">MAIN</a></li>
  <li><a href="#">NEWS</a></li>
  <li><a href="#">CONTACT</a>
    <ul id="vnavbar">
      <li><a href="#">ADDRESS</a></li>
      <li><a href="#">PHONE NUMBER</a></li>
      <li><a href="#">EMAIL</a></li>
    </ul>
  </li>
  <li><a href="#">ABOUT US</a></li>
</ul>

score 3 · Answer 1 · answered Aug 15 '21 at 13:01

Go with flex implementation. This will help you get rid of position: relative;, relative width float: left; and a lot other things.

Add display: flex; to #navbar.
Add flex: 1; display: flex; align-items: center; justify-content: center; to #navbar li
Remove height from #navbar li a

#navbar ul {
    display: none;
    position: absolute;
    top: 100%;
}

#navbar li:hover ul {
    display: block;
}

#navbar,
#navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navbar {
    height: 100px;
    width: 100%;

    display: flex;
}

#navbar li {
    /* float: left;
    position: relative;
    height: 100%;
    width: 25%; */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li a {
    display: block;
    /* height: 100px; */
    text-align: center;
}

#navbar ul li {
    float: none;
}

#navbar li:hover {
    background-color: #6da3a3;
}

#navbar ul li:hover {
    background-color: #6da3a3;
}

#vnavbar li {
    width: 100%;
    height: 100px;
}

#vnavbar ul {
    width: 100%;
}

#vnavbar {
    width: 100%;
}

<ul id="navbar">
    <li><a href="#">MAIN</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">CONTACT</a>
        <ul id="vnavbar">
            <li><a href="#">ADDRESS</a></li>
            <li><a href="#">PHONE NUMBER</a></li>
            <li><a href="#">EMAIL</a></li>
        </ul>
    </li>
    <li><a href="#">ABOUT US</a></li>
</ul>

score 0 · Accepted Answer · answered Aug 15 '21 at 12:59

0

With #navbar li a Instead of using display: block, you can use display:flex then align items like this:

#navbar li a {
    display: flex;
    height: 100px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

answered Aug 15 '21 at 12:59

Trung Hieu Nguyen

316
1
5

If it helped and resolved your question. Please mark it as the answer and close this thread. – Trung Hieu Nguyen Aug 15 '21 at 13:17

score -2 · Answer 3 · answered Aug 15 '21 at 13:07

-2

Use this code

yourIdOrClass {
text-align: center
}

answered Aug 15 '21 at 13:07

Aaseer

117
10

1
Down-voted for following reasons: Code only ansers can be considered low-quality as they are hard to understand for the OP and therefor hard to reproduce. Also you are technical wrong. `text-align` has no influence on block-level elements such as `
- ` in this case.
– tacoshy Aug 15 '21 at 18:49

How to align my text in the middle without tricks like "padding"?

3 Answers3