0

how to fix this

how can i fix the uneven height of the boxes and make the text inside of them being fully centered? I'm still trying to figure out some basics of css

html code

<div id="first_page_main">
      <ul>
        <li><a href="index.html">Login</a></li>
        <li><a href="index.html">Sign up</a></li>
        <li><a href="homepage.php">Continue as guest</a></li>
      </ul>

</div>

css code

#first_page_main{
    background-color: rgb(36, 4, 61);
    height: 250px;
    margin: 80px 0 0 0;
}

#first_page_main ul{
  position: relative;
  top:35%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#first_page_main ul li{
  background-color: rgb(104, 119, 119);
  border: solid thin #999;
  height: 80px;
  width: 130px;
  margin: 0 20px 0 20px;
  padding: 5px;
    text-align: center;
  font-size: 28px;
  display: inline-block;

}

#first_page_main ul li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

#first_page_main ul li:hover {
  font-weight: 600;
}
smksmk
  • 17
  • 4

1 Answers1

-1

Try to look up flexbox in css. https://www.w3schools.com/css/css3_flexbox.asp

<div id="first_page_main">
      <ul style="display:flex; align-items-center;">
        <li><a href="index.html">Login</a></li>
        <li><a href="index.html">Sign up</a></li>
        <li><a href="homepage.php">Continue as guest</a></li>
      </ul>

</div>
Gobii
  • 21
  • 5