Как я могу создать круг с текстом внутри?
Я хочу создать круг для моей ссылки. Я работаю с 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 на данный момент пуст, но есть одна тонкость: постарайтесь не использовать высоту: 40 пикселей и ширину: 80 пикселей.
Что-то с максимальной шириной, отступами и т. д. Я хотел бы сделать этот круг, но по-другому. Ты знаешь, что я имею в виду?
Ответы 2
Вы можете попробовать что-то вроде этого:
.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 ничего не дает, он просто корректно отображается в сниппете.
Обратите внимание, что если вы измените текст, вам придется изменить отступ, чтобы он идеально подходил.
Есть несколько способов добиться желаемого. 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>Надеюсь, это решение для вас.
Почему вы не хотите использовать правило высоты и ширины, если вы не возражаете, если я спрошу?