与动画下划线的中心链接

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。

另外，您的html中有一个额外的 </a>标签。

.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>