Question

我想为我的链接创建一个圆圈。我和Drupal一起工作，我的树枝是：

<div class="field field--name-link field--type-link field--label-hidden field--item">
    <a href="#" rel="noopener noreferrer">See map</a>
</div>

我的SASS目前是空的，但微妙之处是：尽量不要使用height：40px和width：80px。

具有最大宽度，填充等的东西。我想绕圈，但换种方式。你知道我的意思吗？

Answer 1

您可以尝试类似的方法：

.container {
  display: flex;
  justify-content: center;
}


.wrapper-circle {
  border-radius: 500rem;
  min-height: 3rem;
  min-width: 3rem;
  background-color: red;
  text-align: center;
  padding: 2.4em 1.4em .6em 1.4em;
}

<div class="container">
  <a href="#" class="wrapper-circle">
    See map
  </a>
</div>

它仅使用min-height和min-width以及一些padding。

.container类什么也没提供，只是为了在代码段中正确显示。

请注意，如果您更改文本，则必须更改填充以使其完全适合

Answer 2

有几种方法可以实现您想要的。 Djamel提供了一个可行的解决方案，当然它的解决方案与我的解决方案一样好，但是如果您想使该元素具有响应性，那么它将不起作用。

我的解决方法是：

.circle {
     position: relative;
     display: block;
     width:500px;
     height:500px;
     border-radius:250px;
     font-size:50px;
     color:#fff;
     background:#000;
     text-align: center;
    }
    .inner-circle {
      position: relative;
      top: 50%;
      transform:translateY(-50%);
    }

<div class="circle">
  <div class="inner-circle">
    Hello I am A Circle
  </div>
</div>

实际上，对于其中包含内容的响应圈子，使用翻译仍然是正确的方法。您可以“使用” flex，但是当然缺少某些较旧的浏览器的支持。但是通常您可能会发现这不是问题。

要使其具有完全响应性，请改用max-width / height属性。

如果要使用flex，请使用以下解决方案：

.circle
    {
    position: relative;
    display: flex;
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    background:#000;
    align-items: center;
    justify-content: center;
    }
    .inner-circle {
      /* No code needed */
    }

<div class="circle">
  <div class="inner-circle">
    Hello I am A Circle
  </div>
</div>

希望这是为您提供的解决方案。

如何创建一个带有文字的圆圈？

2 个答案: