Центрирование дочернего элемента, у которого есть родные братья в родительском div

Question

Я пытаюсь иметь дедушку и бабушку, у которых есть несколько родительских элементов. Некоторые из родительских элементов div имеют 3 элемента, а другие имеют только 1. Мне нужен 2-й элемент родительского элемента div, чтобы он всегда выровнялся по центру (а также по одному элементу в типе элемента 1 element). Первый и третий элементы в 3-элементном типе div должны касаться 2-го элемента и двигаться только к краям, если их содержимое увеличивается. Как мне добиться этого с помощью CSS? Большинство решений, которые я нашел в Интернете, включают в себя использование полей или абсолютного позиционирования, но это портит связь между 2-м и 1-м / 3-м элементами, которые должны касаться 2-го элемента.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Обратите внимание, что большой желтый элемент в центре идеально отцентрирован по центру, а левый и правый элементы касаются среднего элемента. Div только с одним элементом все еще имеет тот самый элемент, центрированный идеально. красный - прародитель синий родитель желтый цвет - это ребенок

Answer 1

Вы можете использовать flexbox для горизонтального выравнивания по центру ваших столбцов. Каждый класс .child будет взаимодействовать с родственными элементами, которые имеют непосредственное родительское свойство с display: flex

.grandparent {
  background-color: #18bbf0;
  padding: 12px;
  color: #fff;
  font-family: Arial;
  text-align: center;
}
.parent { 
  display: flex; /* control child behavior */
  justify-content: center; /* horizontal centering */
  background-color: #fff;
  padding: 12px;
}
.child {
  background-color: #18bbf0;
  padding: 12px;
}

<div class="grandparent">
  <div class="parent">
    <div class="child">First Text!</div>
    <div class="child">SOME TEXT!</div>
    <div class="child">Other Text!</div>
  </div>
  <div class="parent">
    <div class="child">SOME TEXT!</div>
  </div>
</div>

Answer 2

вы можете использовать сетку для разделения .parent на 3 секции, левая и правая имеют одинаковую длину и выравнивание текста: справа на левой стороне

.parent {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.left-side {
  text-align: right;
}

.must-be-centered { 
  grid-column-start: 2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 3

Я просто пишу фрагмент кода для всех ваших сценариев, надеюсь, он вам поможет.Спасибо

.grandparent {
  background-color: red;
  height: 100vh;
  padding: 10px;
}

.parent {
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  min-height: 100px;
}

span {
  background-color: yellow;
  padding: 10px;
}

.must-be-centered {
  margin: 0 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
     <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 4

Flexbox делает этот вид макета очень простым.В разделах .must-be-centered проверьте комбинацию правила flex: 1 0 auto;, которое позволяет ему расти, и max-width для регулировки размера, который вам нравится.

body {
  background: red;
}
.parent {
  background: blue;
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
  padding: 20px;
}
.parent > span {
  background: yellow;
  text-align: center;
  margin: 0 10px;
  padding: 20px;
}
.must-be-centered {
  flex: 1 0 auto;
  max-width: 200px;
}

<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 5

С классами Bootstrap это будет работать так (без дополнительного CSS) ...

<div class="grandparent min-vh-100 d-flex flex-column align-items-center justify-content-center">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

https://www.codeply.com/go/mOxENzsdjS

Answer 6

Что-то, с чего можно начать.

#parent {
  width: 100vw;
  height: 100vh;
}

.row {
  display: flex;
  justify-content: center;
  background: blue;
  height: 200px;
  align-items: center;
}

.row > div {
  background: yellow;
  height: 100px;
  margin: 0 10px;
  border: 1px solid red;
  width: 150px;
}

.row > div:only-child,
.row > div:nth-child(even) {
  flex: 0 0 400px;
}

<div id="parent">
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
  </div>
</div>

Answer 7

Звучит так, будто вы говорите о вертикальном выравнивании, а не о горизонтальном выравнивании.Это легко сделать с помощью flex:

.grandparent{
    display: flex; 
    flex-direction: column;
} 
.parent{
    display: flex;
    justify-content:center;
    align-items:center;
}

Answer 8

Вы можете попробовать использовать display: flex. Попробуйте установить следующее в родительском элементе:

.parent {
  display:flex;
  justify-content:center;
}