How to Align Bootstrap Icons in the Center Horizontally

I'm struggling to center Bootstrap Icons within my buttons. The icon appears to be off-center horizontally, and I've tried various methods like text-align and flexbox with justify-content. It seems like the "letter" itself is causing some extra space on the right. Can someone provide a solution?

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    padding: 4px;
    font-size: 24px;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddc81c5cfc3c2dfec9d829a822d">[email protected]</a>/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play"></i>
    </button>
</body>

htmlcssbootstrap-4icons

Answer №1

This solution focuses on centering the button element using flex properties, rather than trying to center text inside the button.

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play"></i>
    </button>
</body>

Answer №2

*{
padding:0;
margin:0;
}
button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 60px;
    font-size: 30px;
    border-radius: 5px;
    background-color: red;
}
.bi-play{
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8ad79399959489bacbd4ccd4cb">[email protected]</a>/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play my4"></i>
    </button>
</body>

Verify if this solution resolves your issue. It seems to be correctly centered now.

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

What steps can I take to ensure my website maintains a consistent appearance across various internet browsers?

I'm fairly new to web development; my knowledge is limited to CSS and HTML, just enough to make a website look good. I would appreciate it if you could explain things in simple terms. I've been researching how to ensure that a website looks the ...

htmlcssmultiple-browsers

Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks. HTML: <div id="outer_footer_bottom"> <div class=" ...

htmlcss

Tips for overlaying text onto a canvas background image

I'm curious about how to overlay text on top of an image that is within a canvas element. The image is a crucial part of my game (Breakout), so it must remain in the canvas. I've tried adding text, but it always ends up behind the image, which is ...

javascripthtmlcanvashtml5-canvas

The video on my site is refusing to play

I'm having an issue with a 2-second video that is not playing, yet when I tried a 10-second video it worked perfectly. Why is this happening? Could it be that HTML does not support videos that are shorter than 1-2 seconds? It seems like it's onl ...

htmlcssvideoattributes

Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all! So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation ...

javascripthtmlcssreactjsdom

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

javascripthtmlcssjsonajax

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

htmlcss

The disappearance of IE7 floats is observed when their parent element is styled with position:relative

The issue I'm encountering in IE7 is related to the CSS properties position:relative;, float: right;, and float: left;. While this problem doesn't seem to occur in newer browsers, it's puzzling why position:relative; impacts the behavior of ...

cssinternet-explorer-7css-floatcss-position

Combining LESS with cultural designations

Currently working on a multi-lingual website project and facing the challenge of switching out CSS based on different languages. I am passing the culture code into the page and exploring ways to use it to reference specific selectors for each language. H ...

.netcssless

Creating a linear video playback system

Having an issue with my code in Chrome where auto play is enabled, but the video won't play. I have a loop set up to play each video one after the other, but first things first - how do I get this video to start playing? If there's a pre-made so ...

javascriptjqueryhtmlvideo

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

Develop an engaging billboard carousel using jQuery

After coming across a tutorial on tympanus, I decided to make some modifications to create a rotating billboard effect. However, something seems to be going wrong and it's driving me crazy trying to figure out the problem! $(function() { $('#ad_ ...

javascriptjquerycsscallbackslideshow

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Recently, I added an 'onclick' event to every row of an asp gridview and the popup window that appears is functioning perfectly. Now, I'm interested in adding a transparency level to the body of the popup window for a translucent effect. Can ...

javascriptc#cssasp.netgridview

What is the best way to assign a URL to an image source using a JavaScript variable?

I am working on a script that displays different image URLs based on the time of day using an if-else statement. I want to dynamically load these images in an img src tag so that a different picture is loaded for each time of day. I have defined variables ...

javascripthtmlsrc

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

Is it better to choose AJAX and JQuery for their speed and complexity, or stick with the simplicity of GET requests?

When a user attempts to log in and fails, an error message should be displayed on the page. There are two primary methods that can be used to achieve this: one involves using a form action on the HTML page and handling incorrect login information in the PH ...

phpjavascriptjqueryhtmlajax

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

javascriptjqueryhtmlcssvue.js

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

htmlcssbootstrap-4flexbox

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml