1

Нужно вывести текст внутри круга, но как его выровнять по вертикальному центру?

<div style="margin: 0px auto; border-radius: 100%; color: #09ab8d; border: 2px solid #09ab8d; width: 60px; height: 60px; font-weight: bold; font-size: 25px; text-align: center;">1</div>

1
  • добавить display: grid; place-items: center center
    – NeedH8
    31 янв 2020 в 20:44

2 ответа 2

3

В приведенном в вопросе случае можно добавить line-height:60px

.circle {
  margin: 0px auto;
  border-radius: 100%;
  border: 2px solid ;
  width: 60px;
  height: 60px;
  font-size: 25px;
  text-align: center;
  line-height: 60px
}
<div class="circle">1</div>

2

Используя display: flex - текст внутри будет всегда в центре и по середине в зависимости от размера parent блока

.circle {
    margin: 0px auto;
    border-radius: 100%;
    color: #09ab8d;
    border: 2px solid #09ab8d;
    width: 60px;
    height: 60px;
    font-weight: bold;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="circle">1</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.