Question

我有hyperlink看起来像这样：

<a id="addNew" class="newEvent" href="/html/addNew.html">
    <label class="add">+</label>    
</a>

这些的CSS：

.newEvent {
    position: fixed;
    bottom: 6vw;    
    right: 6vw;
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    border-color: transparent;
    background-color: #ce0808;
    box-shadow: 3px 3px 5px #888888;    
    align-content: center;
}

.add {
    font-size: 6vw;
    color: #ffffff;
    position: relative;
}

由于没有明显的原因，+符号与左侧对齐。请注意，我尝试了那些text-align，margin: 0 auto等我在网上找到的解决方案，但是没有一个能够正常工作，我得到的最好的是横向居中，但与顶部对齐。我需要帮助才能最终使+符号居中。

Answer 1

您已经忽略了显示类型。我假设你想使用基于align-items的flexbox？

.newEvent {
  position: fixed;
  bottom: 6vw;
  right: 6vw;
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  border-color: transparent;
  background-color: #ce0808;
  box-shadow: 3px 3px 5px #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.add {
  font-size: 6vw;
  color: #ffffff;
  position: relative;
}

<a id="addNew" class="newEvent" href="/html/addNew.html">
  <label class="add">+</label>
</a>

Answer 2

不确定您是如何尝试text-align属性的，但它工作得很好。

工作演示

.newEvent {
    position: fixed;
    bottom: 6vw;    
    right: 6vw;
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    border-color: transparent;
    background-color: #ce0808;
    box-shadow: 3px 3px 5px #888888;    
    text-align: center;
}

.add {
    font-size: 6vw;
    color: #ffffff;
    position: relative;
}

<a id="addNew" class="newEvent" href="/html/addNew.html">
    <label class="add">+</label>    
</a>

定位到超链接父级的中心

2 个答案: