Блог

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

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

#css #semantic-ui

#css #semantic-ui

Вопрос:

Я добавил кнопку внутри содержимого 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>

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

Ответ №1:

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

используя 

 i.icon {
    font-size: inherit;
}

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

введите описание изображения здесь

Ответ №2:

Попробуйте приведенный ниже способ, надеюсь, он будет вам полезен

 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>

Ответ №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>

Ответ №4:

Используйте класс «basic button»

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