Как я могу создать круг с текстом внутри? - PullRequest
Новая
       33

Как я могу создать круг с текстом внутри?

0 голосов
/ 25 января 2019

Я хочу создать круг для моей ссылки. Я работаю с 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 пока пуст, но тонкость такова: старайтесь не использовать высоту: 40px и ширину: 80px.

Что-то с max-width, padding и т.д ... Я бы хотел сделать этот круг, но по-другому. Вы знаете, что я имею в виду?

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Есть несколько способов достичь того, что вы хотите.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>

Надеюсь, это решение для вас.

0 голосов
/ 25 января 2019

Вы можете попробовать что-то вроде этого: 

.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 ничего не предоставляет, это простодля корректного отображения во фрагменте.

Обратите внимание, что если вы измените текст, вам придется изменить отступы, чтобы он идеально подходил

...