Вертикальный значок выравнивая с CSS/бутстраповской

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; ('верхний: -7px'; пример значения) к кнопке.

Answer 3

Вы можете попробовать:

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

Надеется, что это помогает!