使用flex在垂直和水平居中时从跨度中删除下划线

Question

标签应该带下划线，但是跨度标签不能带下划线。

此解决方案不适用于我的情况：https://stackoverflow.com/a/13856365/11106685 当我使用flex将标签居中放置时。

https://jsfiddle.net/sebastian3495/sdbuz71v/

html, body {
  width: 100%;
  height: 100%;
}
.wrapper {
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
  display: flex;
}
.center {
  background: lightgreen;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
span {
  display: inline-block;
  text-decoration: none;
}

<div class="wrapper">
  <a class="center" href="https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically">
    Center me <span> <-- </span>
  </a>
</div>

Answer 1

从a标记中删除下划线，将内容包装为跨度中的下划线，并在该特定跨度中添加下划线。

这里是有效的示例https://jsfiddle.net/whnbLfuo/

标签应该带下划线，但是跨度标签不能带下划线。

此解决方案不适用于我的情况：https://stackoverflow.com/a/13856365/11106685 当我使用flex将标签居中放置时。

https://jsfiddle.net/sebastian3495/sdbuz71v/

html, body {
  width: 100%;
  height: 100%;
}
.wrapper {
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
  display: flex;
}
.center {
  background: lightgreen;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
span {
  display: inline-block;
  text-decoration: none;
}

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

<div class="wrapper">
    <a class="center" href="https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically">
        <span class="underline">Center me</span> <span> <-- </span>
    </a>
</div>