Как я могу установить один дочерний элемент в центре выравнивания, используя css? - PullRequest
Новая
       0

Как я могу установить один дочерний элемент в центре выравнивания, используя css?

1 голос
/ 14 февраля 2020

У меня есть несколько дочерних элементов в родительском элементе, которые разделены на 3 столбца и из 4 элементов переходят во второй ряд с выравниванием по левому краю: 

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: wrap;
}

li {
  width: 33.33%;
  flex: 0 0 33.33%;
  padding: 15px 0;
  background: #000;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 15px;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Four</li>
</ul>

Но, когда в моем списке <ul> только один ребенок, я хочу, чтобы один столбец в центре.

Ответы [ 2 ]

3 голосов
/ 14 февраля 2020

Поскольку максимальное число в строке равно 3, вы можете обрабатывать каждый случай отдельно. У вас есть только 2: 

ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-flow: wrap;
  padding:0;
  margin:5px;
}

li {
  flex: 0 0 33.33%;
  padding: 15px 0;
  background: #000;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 15px;
}

/*1 item */
li:only-child {
  margin:auto;
}
/*2 item */
li:nth-child(1):nth-last-child(2) {
  margin-left:auto;
}
li:nth-child(2):nth-last-child(1) {
  margin-right:auto;
}
<ul>
  <li>One</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Four</li>
</ul>
0 голосов
/ 14 февраля 2020

Вы можете использовать CSS 3 Flexbox для достижения ваших конкретных c требований. 

ul {
      display: flex;
      width: 150px;
      flex-flow: row wrap;
      justify-content: space-around;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>


  <ul>
    <li>One</li>
  </ul>


  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>


  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>
</html>

Ссылка: https://www.w3schools.com/css/css3_flexbox.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...