Html 垂直对齐：中间与引导柱一起使用时，中间不对齐内容。 我有三列，中间列有一个按钮，我想在中间垂直对齐。 <div class="row"> <div class="col-md-1"> <div class="mypanel"> </div> </div> <div class="col-md-1"> <div class="mypanel"> <div style="vertical-align:middle"> <button type="button">Click</button> </div> </div> </div> <div class="col-md-1"> <div class="mypanel"> </div> </div> </div>

但是，

vertical align:middle

不会对

div的内容产生任何影响


.mypanel{
高度：100px；
宽度：100%；
显示：表格；
边框：1px纯黑；
}
.以文本为中心{
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}

点击
我最喜欢的方法是使用伪元素，如：after创建元素，设置其高度，然后在此基础上垂直对齐。它也不需要太多CSS：

// I changed the col-md-1 to col-md-4 for this example
.col-md-4 {
  text-align: center;
  height: 200px;
}

.col-md-4 .mypanel {
   height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is
}

// Here is the pseudo element, set the vertical align here and on your button
.col-md-4:nth-child(2) .mypanel:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

.col-md-4:nth-child(2) .mypanel button {
   vertical-align: middle;
   display: inline-block;
}

看看这个工作

这将解决问题
演示不起作用。抱歉，链接错误。现在应该可以工作了。
// I changed the col-md-1 to col-md-4 for this example
.col-md-4 {
  text-align: center;
  height: 200px;
}

.col-md-4 .mypanel {
   height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is
}

// Here is the pseudo element, set the vertical align here and on your button
.col-md-4:nth-child(2) .mypanel:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

.col-md-4:nth-child(2) .mypanel button {
   vertical-align: middle;
   display: inline-block;
}

.mypanel {
    height: 200px;
    border: 1px solid black;
    display:table;
}

 .mypanel div{
    display:table-cell;
    vertical-align:middle
}