用CSS/引导的垂直对齐图标

This is the code I am using:

这是我正在使用的代码:

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

Here's how it looks:

下面的样子:

See how the green tick is slightly below the "View Task" wording? And below the top of the wording?

看到绿色的标记是如何略低于“查看任务”的措辞了吗?在措辞的最下面?

How can I make it so the green tick icon is vertically aligned/centred to the "View Task" text?

如何使绿色的勾号图标垂直对齐/集中到“视图任务”文本?

3 个解决方案

#1

Simple add css. But please change margin-top half of button height.

简单的添加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>

#2

Try this, Add position:relative; top:-7px; ('top:-7px';example value) to the button.

试试这个,添加位置:相对;上图:7 px;('top:-7px';示例值)到按钮。

#3

You can try:

你可以尝试:

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

Hope this helps!

希望这可以帮助!