Aligning the elemnts within a button HTML/Bootstrap

user_9776826 0
Viewed 25

I have a button with 1. an icon and 2. some normal text. The problem is that the icon and the text are on different heights WITHIN the button. I thought something like this would work:

        <div style="text-align: center;">
            <button class="btn btn-outline-dark btn-lg">
                <div class="row">
                    <i class="material-icons md-48">hourglass_full</i>
                    Some Text
                </div>
            </button>
        </div>

it does work, but the w3c validator tells me, that

"Element div not allowed as child of element button in this context."

How are you supposed to align the elements within a button then? I didnt find a solution :S

Thanks for the help in advance!

twitter-bootstrap css html
1 Answers

You can take advantage of bootstrap classes, specifically flexbox

  • d-flex will make the button a flex box
  • align-items-center will center flex items vertically

Take a look

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="p-5">
  <button class="btn btn-outline-dark btn-lg d-flex align-items-center m-auto">
   <i class="material-icons md-48">hourglass_full</i>
   <span class="ml-2">Some Text</span>
 </button>
</div>

user_38441880
Related