Невозможно выровнять текст по вертикали внутри div, который выровнен по горизонтали с другими

Question

У меня 4 деления выровнены по горизонтали на одной линии. Я пытаюсь отцентрировать вертикально второй и третий атрибуты "вертикальное выравнивание", но безуспешно.

#container {
  width:100%;
  height:45px;
  background-color:yellow;
}

#left {
  width:100px;
  height:45px; 
  float:left;
  background-color:red;
}

#center1 {
  width:100px;
  height:45px;
  display:inline-block;
  background-color:green;
  vertical-align: center;
  word-break: break-word;
}

#center2 {
  width:100px;
  height:45px;
  display:inline-block;
  background-color:orange;
  word-break: break-word;
}

#right {
  width:100px;
  height:45px; 
  float:right;
  background-color:blue;
}

<div id="container">
  <div id="left">&nbsp;</div>
  <div id="center1">Center 1</div><div id="center2">Center 2 Center 3</div>
  <div id="right">&nbsp;</div>
</div>

Посмотреть в скрипке

Я не хочу выравнивать второй и третий контент с 'position: относительным; top: Xpx'или'line-height: 45px;' из-за второго и третьего может быть до двух строк, поэтому мне нужно правильно выровняться с одной линией и двумя линиями.

Любая идея?

Большое спасибо!

Answer 1

Просто добавь display: inline-flex; а также align-items: center; в #center1 а также #center2,

Изменить: не забудьте отпустить их влево.

---

Пример:

#container {
  width:100%;
  height:45px;
  background-color:yellow;
}

#left {
  width: 100px;
  height:45px; 
  float:left;
  background-color:red;
}

#center1 {
  width: 100px;
  height:45px;
  background-color:green;
  float: left;
  display: inline-flex;
  align-items: center;
}

#center2 {
  width: 100px;
  height:45px;
  background-color:orange;
  float: left;
  display: inline-flex;
  align-items: center;
}

#right {
  width: 100px;
  height:45px; 
  float:right;
  background-color:blue;
}

<div id="container">
  <div id="left">&nbsp;</div>
  <div id="center1">Center 1</div><div id="center2">a long line of text!</div>
  <div id="right">&nbsp;</div>
</div>

Answer 2

Вам нужно использовать vertical-align:middle; на обоих, второй и третий элемент, как это:

#table{
  display:table;
  width:100%;
}

#container{
  display:table-row;
}

#left{
  display:table-cell;
  height:100%;
  width:100px;
  line-height:45px;
  background-color:red;
}

#center1{
  width:100px;
  line-height:45px;
  text-align:center;
  display:table-cell;
  background-color:green;
  word-break: break-word;
  vertical-align:middle;
}

#center2{
  width:100px;
  line-height:45px;
  text-align:center;
  display:table-cell;
  background-color:orange;
  word-break: break-word;
}

#space{
  background-color:yellow;
  display:table-cell;
}

#right{
  width:100px;
  line-height:45px;
  display:table-cell;
  background-color:blue;
}

<div id="table">
  <div id="container">
        <div id="left">&nbsp;</div>
        <div id="center1">
            Center 1
       </div>
       <div id="center2">
          Center 2 <br>Center 3
       </div>
       <div id="space">
       
       </div>
       <div id="right" style="">&nbsp;</div>
  </div>
</div>

Обновлен для центрирования текста по вертикали, а не только элемента

Чтобы расположить текст, используйте line-height (вертикальное положение), которое должно быть равно высоте элемента и text-align:center центрировать текст по горизонтали.

Answer 3

Вероятно, я бы использовал flexbox, так будет проще иметь такую ​​планку и легче центрировать ее по вертикали.

Посмотри.

body {
  margin: 0;
}
.flex-bar {
  display: flex;
  width: 100%;
}
.box {
  display: flex;
  width: 95px;
  height: 40px;
  justify-content: center;
  align-items: center;
  padding: 2.5px;
}
.filler {
  flex: 1;
}
.red {
  background: red;
}
.green {
  background: green;
}
.orange {
  background: orange;
}
.yellow {
  background: yellow;
}
.blue {
  background: blue;
}

<div class="flex-bar">
  <div class="red box"></div>
  <div class="green box">Centered #1</div>
  <div class="orange box">Centered text number 2</div>
  <div class="box yellow filler"></div>
  <div class="blue box"></div>
</div>

Надеюсь, это поможет.