Question

我正在尝试将此按钮垂直对齐在模态页脚div的中心。这是我的JSFiddle的链接：https://jsfiddle.net/kris_redden/34jyLpok/

＆＃13;

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px position: relative;
}

＆＃13;

<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

＆＃13;

我不确定需要更改什么才能在蓝色模态页脚div的中心垂直对齐。我知道可以通过在按钮上加上边距来实现这一点，但这并不是我想做的事情。

Answer 1

最简单的方法是将以下内容添加到.modal-footer

"01:00"

Answer 2

这也可以通过使用

来实现

.button-container{
 position:relative;
 height:100%;
}

.button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这里没有必要

vertical-align:middle;。如果按钮容器高度未知且我不能使用flex-box（dispaly:flex;），我会使用此方法。
https://jsfiddle.net/34jyLpok/7/

另一种选择是使用flex-box（display:flex;）

.button-container{
     height:100%;
     display: flex;
     //flex-direction: column;//only vertical
     align-items: center;//both vertical and horizonal
     justify-content: center
    }

    .button{
      width:100px;
    }

display: flex的问题在于旧IE浏览器版本不完全支持它。 https://jsfiddle.net/34jyLpok/9/

Answer 3

.modal-footer {
display: table;
width: 100%;
}

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

去寻找这样的事情。这是fiddle。

Answer 4

您可以将样式更改为

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display:table;
  width: 100%;
}
.wrapper-div {
  display:table-cell; 
  vertical-align: middle;
}
.button {
  background: #e8e8e8;
  display: block;
  margin:auto;
  font-size: 12px
  position: relative;
}

您可以将margin:auto;从.button移至仅垂直居中的按钮

见fiddle

Answer 5

您可以使用flexbox，如下所示

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 6

这么容易

HTML：

<div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
</div>

CSS：

.wrapper-div {
    line-height: 60px; // ex: 60px, The button will center to line-height.
}
.wrapper-div button { // height of button must be less than its parent.
   height: 30px;
   display: inline-block;
   vertical-align: baseline;
}

div中的垂直对齐中间按钮

6 个答案: