垂直对齐图标与CSS / bootstrap

Question

这是我正在使用的代码：

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">View Task
               <button type="button" class="btn btn-success btn-circle">
                  <i class="fa fa-check"></i>
               </button>
            </h1>
        </div>
    </div>

以下是它的外观：

看看绿色标记如何略低于“查看任务”措辞？低于措辞的顶部？

如何使绿色勾号图标与“查看任务”文本垂直对齐/居中？

Answer 1

简单添加css。但请更改按钮高度的上半部分。

.page-header{
  position: relative;
  padding-right: 30px;
  display: inline-block;
  }
button{
position: absolute;
  right: 0;
  top: 50%;
  height: 20px;
  width: 20px;
  background: green;
  margin-top: -10px;
  border: 0;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 10px;
}

<div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">View Task
               <button type="button" class="btn btn-success btn-circle">
                  <i class="fa fa-check">icon</i>
               </button>
            </h1>
        </div>
    </div>

Answer 2

试试这个， 将position:relative; top:-7px;（'top：-7px';示例值）添加到按钮。

Answer 3

您可以尝试：

.page-header button {
vertical-align: text-top;
}

希望这有帮助！