Блог

Главная - Вопросы по программированию - абсолютное центрирование позиции с проблемами преобразования

абсолютное центрирование позиции с проблемами преобразования

#html #css #position #transform

#HTML #css #положение #преобразование

Вопрос:

У меня есть несколько элементов списка, которые нужно центрировать. Я должен сделать это с абсолютной позицией, поскольку она перекрывает другой div. Я могу сделать это с помощью свойств position и transform. Но у него есть проблема, когда ширина устройства меньше. Я хочу, чтобы он был центрирован как можно дольше, но он прерывается до того, как ширина устройства станет достаточно меньше. Я могу исправить это с помощью calc, но что делать, когда ширина ul неизвестна?
codepen 

 .parent {
  height: 70px;
  margin-top: 100px;
  width: 100%;
  background: #000;
  position: relative;
}

ul,li {
  list-style-type: none;
}

ul {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  clear:both;
  display:block;
}

li {
  height: 70px;
  width: 70px;
  background: #f44;
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}  
 <div class="parent">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Ответ №1:

Обновите свое ul правило следующим образом, где left: 0 / right: 0 сделает его полной шириной и text-align центрирует li 

 ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  text-align: center
}

Пример фрагмента

 .parent {
  height: 70px;
  margin-top: 100px;
  width: 100%;
  background: #000;
  position: relative;
}

ul,li {
  list-style-type: none;
}

ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  text-align: center
}

li {
  height: 70px;
  width: 70px;
  background: #f44;
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}  
 <div class="parent">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Ответ №2:

Почему вы просто не добавляете text-align: center в ul тег, без преобразования или положения вообще. Если li это встроенный блок, он будет центрирован и перенесен на ul границы.

Комментарии:

1. Я забыл сказать, что я должен использовать абсолютное позиционирование. Потому что ему придется перекрывать другой div