css - 带有 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。但是请更改 margin-top half of button height。

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