CODEWITHSUNDEEP
htmlcssbootstrap-4
Talha Munir
Talha Munir

Reputation: 526

Aligning the content inside the button

I have used Google Material Icons to add 'play' logo before the text in the button. However, after inserting the icon, both the text and the icon move slightly out of their place and don't retain their center alignment. How do I keep them aligned?

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

Upvotes: 0

Views: 44

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

Just add align-items-center and make the button d-flex also...

<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

Note: you don't need flex-row since flex-direction:row is the default.

Upvotes: 2

chintuyadavsara
chintuyadavsara

Reputation: 1569

Here is a way by changing the font-size of the pseudo-element.

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

Don't know if it works for you. It's just an attempt. Thank you.

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

Upvotes: 0

Related Questions