bootstrap 3 значок кнопки с выравниванием текста svg - PullRequest
Новая
       4

bootstrap 3 значок кнопки с выравниванием текста svg

0 голосов
/ 08 мая 2020

Я использую bootstrap 3 и несколько значков svg в своем проекте. Текст на кнопке, использующей значок svg, находится в правом нижнем углу кнопки, а не в середине кнопки.

This is the picture of the button

код кнопки 

<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>

кнопка css 

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

копия код иконок кнопок с сайта.

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Просто добавьте display: grid; внутри .btn {} 

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  display:grid;
  
}
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>
0 голосов
/ 08 мая 2020

Вы можете попробовать его без стандартных стилей bootrap 3, потому что для vertical-align: middle

<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg><span>Previous</span></button>
<!-- some extra span around the text -->

и 

.btn {
  background-color: #ff9800;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
.btn svg, .btn span {
  display: inline-block;
  vertical-align: middle;
}
класса BS нет
...