Text off-center in Bootstrap Badge

I'm struggling to find a way to center my text with the icon properly. This issue is only happening in Google Chrome. You can view the problem in action on this code snippet.

@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">Text Should Be Vertically Centered</span>
  <i class="material-icons md-18">cancel</i>
</label>

Any advice or solution would be greatly appreciated!

Illustration of the issue:

https://i.sstatic.net/LG4Uk.png

htmlcssbootstrap-4vertical-alignment

Answer №1

To achieve this, you can utilize Flex utilities from Bootstrap.

<label class="badge badge-secondary d-inline-flex align-items-center justify-content-start">
    <span>Make sure it's centered</span>
    <i class="material-icons md-18">cancel</i>
</label>

See this Codepen for an example.

Answer №2

To ensure proper alignment, apply the align-middle class to the badge contents, not the badge itself...

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

See a demonstration using an MD icon here:

Answer №3

Feel free to utilize this attribute!

 span{
   align-content: top;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

htmlcssinternet-explorer-6scrollbar

Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code: <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;"> <ul id="myTab" class="nav nav ...

javascriptjquerycsstwitter-bootstrap

Set a background image URL for a specific division inside a template

I have a drawPlaceDetails function that populates an HTML template with values. The getPhotoURL() function retrieves a URL link to an image, which I am trying to assign to the background-image property. However, the div remains empty without displaying the ...

javascriptjqueryhtmlcss

The Bootstrap accordion-toggle incorrectly displays the content symbol (+/-) upon initial page load

Hey there, I've implemented the accordion-toggle code below on my visualforce page. Everything is working smoothly with the collapsible toggle, except for one issue. When loading or refreshing the page for the first time, the collapsed panel shows the ...

jquerycsstwitter-bootstrapvisualforce

Prevent global CSS from affecting VueJS by enabling only scoped CSS within components

Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...

cssvue.js

How to align text to the left and image to the right using CSS

I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images. My goal is to have the text left-aligned and vertically centered, while the images are right ...

csshtmllayout

Connect to a point on the leaflet map using an external <a> tag reference

I have a leaflet map and I am trying to create a link that, when clicked, will activate a specific marker on the map. Essentially, I want the linked marker to simulate being clicked when the link is clicked. Here is an example of the link: <a href="#" ...

javascripthtmldictionaryleaflet

How to align text vertically in a cell alongside a button in another cell using Bootstrap

In my table, I have 3 columns of text and a fourth column with a button. The alignment of the text in the cells does not match the button text vertically due to the button having a vertical-align value of 'middle'. To align them properly, I curre ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Animate.css bxSlider text animations

As I am in the process of setting up a slider for my website, I have encountered some issues. I am utilizing bxslider and wished to incorporate animations for the text on each slide by integrating animate.css. Animate.css is quite simple: just add "animat ...

jquerycssanimationbxslider

How can I fix the issue of the header background image not resizing properly? Any suggestions?

I am currently working on improving the responsiveness of my website when a user resizes their browser window. One specific issue I'm facing is resizing the banner image as the window size changes. The website in question can be found at The CSS code ...

cssresponsive-design

I continue to encounter a problem where GitHub refuses to navigate links, despite them being properly configured

While working on GitHub, I encountered an issue when trying to set up a website on GitHub domains - the links were not functioning properly. Here is an example of what I was dealing with: <!DOCTYPE html> <form action="homepage.html" meth ...

htmlgithub

Send the form using an alternative method to avoid using preventDefault

Having some trouble with my website's sign-in functionality not working properly on all browsers. In Firefox, I keep getting a "ReferenceError: event is not defined" error. I've read through various posts about preventDefault behaving differentl ...

javascriptjqueryhtmlfirefoxpreventdefault

What is the best way to wrap all divs except for the one with a .header-container-wrapper class?

In the midst of a project involving hubspot, I am facing an issue. I need to enclose all div elements within the body tag, except those with the class .header-container-wrapper. The default code provided by hubspot wraps all divs within #site-wrapper. $(& ...

jqueryhtmlcsshubspot

Activate the Twitter Bootstrap Lightbox when the page is loaded

Is there a way to make my twitter bootstrap lightbox automatically trigger when the HTML page loads? Currently, I have this script in my 'main.js' file: function lightbox(){ $('#myLightbox').lightbox(); }; I heard that I can us ...

htmlcsszend-frameworktwitter-bootstraplightbox

Toggle button color on click by using ng-click on a different button

As a newcomer to Angular, I am facing an issue. I have two buttons - button1 and button2. What I want is that when I click on button1, its color changes from green to red. Then, when I click on button2, the color of button1 should revert back to green. How ...

javascripthtmlangularjs

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...

cssfonts

Whenever I run my HTML through a server, it doesn't seem to connect with my CSS file

I'm currently developing a Django app, and I have encountered an issue where the CSS is not loading when I run different pages through the server. Oddly enough, everything works fine when I open the files directly without using the server. The problem ...

htmlcssdjango

Combine the bootstrap button and dropdown menu side by side and adjust the width of the dropdown to be

Snippet: <div class="d-grid gap-2 d-md-block mt-1"> <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button> <button class="btn ...

htmlbootstrap-5

What is causing the CORS error with JQUERY and JQM?

My HTML5 page is set up without any jQuery and has no CORS error, as shown below: <!DOCTYPE html> <HTML> <button type="button" onClick="getBase64FromImageUrl()">Click Me!</button> <img id="preview1" crossorigin="anonymous" src=" ...

jqueryhtmlgoogle-chromejquery-mobilecors