时间戳

首页 > 解决方案 > 如何更正 li 框的高度并将其中的文本居中？CSS

html - 如何更正 li 框的高度并将其中的文本居中？CSS

问题描述

如何解决这个问题

我怎样才能修复盒子的不均匀高度并使它们里面的文字完全居中？我仍在尝试弄清楚 CSS 的一些基础知识

html代码

<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代码

#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;
}

标签： htmlcss

解决方案

尝试在 css 中查找 flexbox。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>

推荐阅读