CODEWITHSUNDEEP
htmlcssbootstrap-4vertical-alignment
theMayer
theMayer

Reputation: 16177

Bootstrap Badge - Text Not Centered in Badge

I can't figure out how to get my text to align with the middle of my icon. This is using Chrome. See this fiddle.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<label class="badge badge-secondary align-middle">
  <span class="pb-2">Should Be Centered</span>
  <i class="material-icons md-18">cancel</i>
</label>

Any suggestion is welcome!

Example image:

enter image description here

Upvotes: 6

Views: 10446

Answers (3)

Arup Rakshit
Arup Rakshit

Reputation: 118289

You can Bootstrap Flex utilities to happen this.

<label class="badge badge-secondary d-inline-flex align-items-center justify-content-start">
    <span>Should Be Centered</span>
    <i class="material-icons md-18">cancel</i>
</label>

Codepen example.

Upvotes: 9

Sidhanshu_
Sidhanshu_

Reputation: 2130

You can use this property too!

 span{
   vertical-align: super;
  }

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362610

You'd want to put align-middle on the badge contents, instead of the badge...

  <label class="badge badge-secondary">
    <span class="pb-2 align-middle">Should Be Centered</span>
    <i class="material-icons md-18 align-middle">cancel</i>
  </label>

Demo with MD icon: https://www.codeply.com/go/TkAEvkUcXB

Upvotes: 8

Related Questions