关于#html#的问题：但是text-algin：center

img



```html
<body>
<div class="main">
<div class="load-box">
<div class="login-box">
<a href="#"><label>用户登录label>a>
div>
<div class="register-box">
<a href="#"><label>管理员登录label>a>
div>
div>
div>
body>



```css
<style>
 .*{
 margin:0;
 padding:0;
 }
 .main{
 width:100vw;
 height:100vh;
 background:linear-gradient(50deg,gray,white);
 }
 .load-box{
width:500px;
height:300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background:linear-gradient(80deg,gray,black);
text-align: center;
 }
 .login-box,.register-box{
margin:50px 150px 0 150px;
width:200px;
height:80px;
display:flex;
align-items:center;
flex-direction:column;
background:linear-gradient(60deg,gray,black)
 }
.login-box a{
font-size:30px;
color:white;

text-decoration:none;
}
style>

想要去掉下划线，字体居中。但是text-algin：center；和text-decoration：none；都没有化。


            .* {
                margin: 0;
                padding: 0;
            }

            .main {
                width: 100vw;
                height: 100vh;
                background: linear-gradient(50deg, gray, white);
            }

            .load-box {
                width: 500px;
                height: 300px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background: linear-gradient(80deg, gray, black);
                text-align: center;
            }

            .login-box,
            .register-box {
                margin: 50px 150px 0 150px;
                width: 200px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                /* flex-direction: column; */
                background: linear-gradient(60deg, gray, black)
            }
            .register-box a{
                text-decoration: none;
            }

            .login-box a {
                font-size: 30px;
                color: white;

                text-decoration: none;
            }

参考GPT和自己的思路：

可以尝试将text-align属性改为让子元素居中，即将.load-box的样式改为：text-align: center;
然后，要去掉下划线，可以将a标签的文本装饰属性text-decoration改为none。同时，为了让文本居中，可以通过设置line-height和height属性来实现。
修改后的CSS代码如下所示：

<style>
/* 去掉所有元素的margin和padding */
* {
  margin:0;
  padding:0;
}

.main {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(50deg, grey, white);
}

.load-box {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(80deg, gray, black);
  text-align: center; /* 让子元素居中 */
}

.login-box, .register-box {
  margin: 50px 150px 0 150px;
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(60deg, gray, black);
}

.login-box a, .register-box a {
  font-size: 30px;
  color: white;
  text-decoration: none; /* 去掉下划线 */
  line-height: 80px; /* 让文本在容器中居中 */
  height: 80px;
}
</style>