使用 flex 垂直和水平居中时从范围中删除下划线

Question

a 标记应加下划线，但 span 标记不应带有下划线。

此解决方案在我的情况下不起作用：https://stackoverflow.com/a/13856365/11106685因为我使用 flex 将 a 标签居中。

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/

a 标记应带有下划线，

但是，跨度标记不应带有下划线。

此解决方案在我的情况下不起作用：https://stackoverflow.com/a/13856365/11106685因为我使用 flex 将 a 标签居中。

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>