PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] how to center a span vertical inside a button with bootstrap 4

 November 17, 2022     css, html, twitter-bootstrap, vertical-alignment     No comments   

Issue

I have a small rounded circle with a number inside inside a button. How can i center the span vertical inside the button?

<button class="btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>

CSS:

.approve-counter {
    width: 20px;
    height: 20px;
    line-height: 20px;
}

As you can see, the red circle is not exactly vertical in the middle of the blue button

Fiddle: https://jsfiddle.net/vour83s9/


Solution

You can use flex and align-items: center to vertically center all items in the button. Apply the following styles to your button element:

.btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Or even better, you could simply use Bootstrap 4 classes in your button tag to achieve the same result:

<button class="d-flex align-items-center justify-content-between btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>


Answered By - Alexander Belokon
Answer Checked By - Senaida (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing