Question

我试图让我的按钮垂直对齐但是我的代码没有工作，这是我的代码：

HTML：

<div class="col-xs-12 col-sm-12 col-md-2 pull-right col-btn">
    <div class="form-group text-right">
        <button type="button" class="btn btn-purple">
            Calculate
        </button>
    </div>
</div>

CSS：

.col-btn .form-group {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Answer 1

好的尝试一下。我认为它适用于boostrap https://jsfiddle.net/2Lzo9vfc/135/

<强> CSS

.col-btn {
    height:400px;
    border: 1px solid black;
    width: 100%
    text-align: center;
    display: table;
}

.col-btn .form-group {
  display: table-cell;
  vertical-align: middle;
  text-align: center;

}

Answer 2

对齐垂直和水平

这是水平对齐，如果你不想要，请删除。

width: 100px;  
margin: 0 auto;

＆＃13;

.col-btn .form-group {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  
  width: 100px;
  margin: 0 auto;
}

.col {
  height: 200px;
  background-color: red;
  }

＆＃13;

<div class="col col-xs-12 col-sm-12 col-md-2 pull-right col-btn">
                    <div class="form-group text-right">
                        <button type="button" class="btn btn-purple">
                            Calculate
                        </button>
                    </div>
                    </div>

＆＃13;

垂直对齐表格组引导程序

2 个答案: