Выравнивание содержимого внутри кнопки - PullRequest
Новая
       1

Выравнивание содержимого внутри кнопки

0 голосов
/ 16 марта 2019

Я использовал Google Material Icons, чтобы добавить логотип «play» перед текстом в кнопке.Однако после вставки значка текст и значок слегка сдвигаются и не сохраняют выравнивание по центру.Как мне их выровнять? 

.play{
    border: 1px solid black;
    border-radius: 20px;
    padding: 5px 25px;
    text-transform: uppercase;
    margin: 10px;
    background-color: transparent;
    color: black;
}

.play::before{
    font-family: 'Material Icons';
    content: 'play_circle_filled';
    position: relative;
    text-transform: lowercase;
    font-size: 18px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container d-flex flex-row justify-content-center buttons" style="font-size: 12px;">
                    
                   
<button type="button" class="play"><span class="playicon"></span>Play into video</button>
                </div>

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Просто добавьте align-items-center и сделайте кнопку d-flex также ... 

<div class="container d-flex align-items-center justify-content-center buttons">
    <button type="button" class="play d-flex align-items-center"><span class="playicon"></span> Play into video</button>
</div>

https://www.codeply.com/go/iOqyT71QKy

Примечание: вам не нужно flex-row, так как flex-direction: row является значением по умолчанию.

0 голосов
/ 16 марта 2019

Вот способ изменить размер шрифта псевдоэлемента. 

.play::before{
  font-family: 'Material Icons';
  content: 'play_circle_filled';
  position: relative;
  text-transform: lowercase;
  font-size: inherit;
  top:1px;
  left:-4px;
}

Не знаю, работает ли он для вас.Это просто попытка.Спасибо. 

.play{
  border: 1px solid black;
  border-radius: 20px;
  padding: 5px 25px;
  text-transform: uppercase;
  margin: 10px;
  background-color: transparent;
  color: black;
}

.play::before{
  font-family: 'Material Icons';
  content: 'play_circle_filled';
  position: relative;
  text-transform: lowercase;
  font-size: inherit;
  top:1px;
  left:-4px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <div class="container d-flex flex-row justify-content-center buttons" style="font-size: 12px;">
      <button type="button" class="play"><span class="playicon"></span>Play into video</button>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...