Как я могу получить значок, вертикально центрированный внутри кнопки с помощью Semantic UI.

Question

.

. Я добавляю кнопку внутри содержимого div, находящегося внутри элемента div. Я хочу добавить красивую кнопку «читать дальше» с иконкой внутри нее. Это код, который я использовал.

<div class="content"> 
    <div class="extra"> 
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>"> 
     Read more 
     <i class="chevron right icon"></i> 
    </a> 
    </div> 
</div> 

В результате кнопка не центрируется по вертикали, как показано ниже.

Answer 1

Я не смог решить проблему из других ответов, но это заставило меня понять, что это разница в размере шрифта, что делает значок децентрализованным.

использованием

i.icon { 
    font-size: inherit; 
} 

я, наконец, получил этот результат:

Answer 2

Try ниже пути, надеюсь, что это будет полезно для вас

a{ 
 
    border:1px solid blue; 
 
    text-decoration:none; 
 
    padding:10px; 
 
    display:inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<div class="content"> 
 
    <div class="extra"> 
 
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>"> 
 
     Read more 
 
     <i class="fa fa-arrow-right"></i> 
 
    </a> 
 
    </div> 
 
</div>

Answer 3

Попробуйте это:

a.basic.button{ 
 
    border:1px solid #66fcf1; 
 
    color: #66fcf1; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    transition: all 0.3s ease; 
 
} 
 
a.basic.button i{ 
 
    vertical-align: middle; 
 
} 
 
a.basic.button:hover{ 
 
    background:#66fcf1; 
 
    color: #fff; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<div class="content"> 
 
    <div class="extra"> 
 
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>"> 
 
     Read more 
 
     <i class="fa fa-chevron-right"></i> 
 
    </a> 
 
    </div> 
 
</div>

Answer 4

Используйте "основной кнопки" класс

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> 
 
<button class="ui basic button"> 
 
    Read more 
 
<i class="icon angle right"></i> 
 
</button>