javascript - 带动画下划线的中心链接

Question

我的这个工作正常，但由于某些原因我的链接没有居中。

.actions {
    -webkit-align-content: center;
    align-content: center;
}

.useraction {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5vw;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    line-height: 1em;
}

@media only screen and (max-width: 500px) {
.useraction {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75vw;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    line-height: 1em;
}
}

a {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 0;
  position: relative;
}

a:after {    
  background: none repeat scroll 0 0 transparent;
  text-align: center;
  bottom: 0;
  content: "";
  display: inline;
  height: 0.5vh;
  left: 50%;
  position: absolute;
  background:  #07F446;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

a:hover:after { 
  width: 100%; 
  left: 0; 
}

<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<div class="actions">
<a href="/contact"> <p class="useraction">Contact</p></a></a>
<br>
<a href="/login"> <p class="useraction">Log In</p></a>
</div>

如您所见，下划线有效，但出于某种原因，链接保持对齐。我需要链接显示在中心。

非常感谢任何帮助，在此先感谢。

Answer 1

因为它是 text-align:center , 不是 align-content:center .

此外，您还有一个额外的 </a>在您的 HTML 中标记。

.actions {
    -webkit-align-content: center;
    text-align: center;
}

.useraction {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5vw;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    line-height: 1em;
}

@media only screen and (max-width: 500px) {
.useraction {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75vw;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    line-height: 1em;
}
}

a {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 0;
  position: relative;
}

a:after {    
  background: none repeat scroll 0 0 transparent;
  text-align: center;
  bottom: 0;
  content: "";
  display: inline;
  height: 0.5vh;
  left: 50%;
  position: absolute;
  background:  #07F446;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

a:hover:after { 
  width: 100%; 
  left: 0; 
}

<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<div class="actions">
<a href="/contact"> <p class="useraction">Contact</p></a>
<br>
<a href="/login"> <p class="useraction">Log In</p></a>
</div>