无法在 div 内垂直对齐与其他文本水平对齐的文本

Question

我有 4 个 div 在同一行水平对齐。我试图通过 'vertical-align' 属性将第二个和第三个垂直居中，但没有成功。

#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>

View in Fiddle

我不想将第二个和第三个内容与 'position: relative; top: Xpx' 或 'line-height: 45px;' 对齐，因为第二个和第三个内容可以有两行，所以我需要与一行和两行保持正确对齐行。

Answer 1

您需要在第二个和第三个元素上都使用 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 2

只需将 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 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>

希望对您有所帮助。

无法在 div 内垂直对齐与其他文本水平对齐的文本

Can't align vertically text inside a div which is aligned horizontally with others

html

css

vertical-alignment