Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

View in Fiddle

我不想将第二和第三内容与＆＃39; position：relative;顶部：Xpx＆＃39;或者＆＃39;行高：45px;＆＃39;由于第二个和第三个可以有两行，所以我需要保持与一行和两行正确对齐。

有什么想法吗？

非常感谢！

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。

修改：别忘了把它们漂浮起来。

示例：

＆＃13;
＆＃13;
#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; }
＆＃13;
<div id="container"> <div id="left"> </div> <div id="center1">Center 1</div><div id="center2">a long line of text!</div> <div id="right"> </div> </div>
＆＃13;
＆＃13;
＆＃13;

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>

我希望这会有所帮助。

无法在与其他人

3 个答案: