3

Всем привет Есть такая задача нужно разместить внутри кружочка текст по середине. Явно нужно использовать позиционирование. Но что у меня не совсем выходит.

Привожу код.

введите сюда описание изображения

.round {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}
<ul>
  <li class="round">
    <a href="#"></a>

    <ul class="text">
      <li class="text"><a href="#" class="number">15</a></li>
    </ul>

  </li>
</ul>

2 ответа 2

3

.round {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 90px;
}
<ul>
  <li class="round">
    <a href="#"></a>

    <ul class="text">
      <li class="text"><a href="#" class="number">15</a></li>
    </ul>

  </li>
</ul>

2

Попробуйте вот это решение с использованием Flexbox

.round {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 90px;
}
<ul>
  <li class="round">
    <a href="#" class="number">15</a>



  </li>
</ul>

Ваш ответ

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

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