Is there a way to perfectly center an SVG image and text within a linked button?

After creating a button that utilizes an SVG image icon on the left and text on the right, I encountered an issue where the text could not be perfectly centered in alignment with the icon.

Here is how it currently appears:

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

The text "Authorize" seems to be aligned to the top rather than being centered in the middle relative to the icon.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success"><img src="images/edit_icon.svg" alt=""> Authorize</button>

I attempted to wrap the text "Authorize" in 

<span class="btn-text"></span>
and adjusted the padding-top and margin-top, but this did not resolve the issue.

Could anyone provide guidance on how to perfectly align the text with the icon? Thank you!

cssbootstrap-4

Answer №1

Solve your issue by implementing flex-box.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success d-flex align-items-center"><img src="images/edit_icon.svg" alt=""> Authorize</button>

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

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

htmlcss

Issues with Monospace Google Fonts on JSFiddle are preventing them from displaying correctly

It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...

cssjsfiddlegoogle-font-api

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

javascriptcssreactjsreact-nativeflexbox

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...

htmlcsswordpressiframe

What is the best way to prevent text overflow in a div while maintaining its width without dropping down

I have a square element that measures 100 pixels in width. The overflow-x property has been applied, with a value of hidden. My intention was for this setting to conceal any text that extends beyond the boundaries of the container, rather than allowing it ...

htmlcss

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

htmlcss

Tips for modifying the property value of a navigation bar in Bootstrap using Sass

I currently have a navigation bar on my webpage that is styled with the following CSS properties: .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1r ...

csssassbootstrap-4

Is there a way to ensure that the div is displayed on the same line?

Check out the jsfiddle link provided: http://jsfiddle.net/HE7yT/ I'm trying to align the Image, content, and Amount in the same line. How can I achieve this? The goal is to have "150" displayed on the same line as the picture. var HTML = $(' ...

htmlcss

The fixed position div remains stationary as the page scrolls

Below, I am attempting to fix the position of the 'inner-navigation' div within the 'compare-display' box by making it absolutely positioned. However, when scrolling, the 'inner-navigation' div is not staying fixed. How can I ...

csshtmlpositionabsolute

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Styling the React Material UI DataGrid with the MuiDataGrid-window class using createMuiTheme or makeStyles / styled-components

I've been putting in a lot of effort to customize the css for the .MuiDataGrid-window in MaterialUi's DataGrid. I've been referencing css rules from https://material-ui.com/api/data-grid/ I managed to get it working within createMuiTheme fo ...

cssreactjsdatagridmaterial-uimui-datatable

CSS division style not being properly implemented across entire form

I currently have an HTML form linked to a CSS file. Here is the HTML code: .css-form-group{ margin-bottom:10px; clear:both; } .css-form-group label{ font-weight: bold; } .form-input{ float: right; } .form-input:focus{ background: y ...

htmlcss

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

I recently implemented Bootstrap 4.6 into my project. The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when th ...

htmlcsstwitter-bootstrapbootstrap-4

Making sure that the height of the <section> element is equal to the height of the viewport when the page

Is there a way to dynamically adjust the height of a <section> element to match the viewport every time the page is reloaded? Once the height is set, it should remain fixed even if the user resizes the window. For example, if the viewport's hei ...

javascriptjquerycssheightviewport

Table-styled div containing a horizontal scrolling div

I am currently in the process of developing a webpage with dual columns. The two columns are segregated into div containers, one labeled right and the other labeled left. These columns reside within a parent div called row, which is nested within a main di ...

csshtml

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

htmlcsslistvue.js

Utilize Boostrap to stylishly incorporate an image within a DIV using CSS

I have a project with numerous HTML pages all containing the same elements. To make updating easier, I decided to call all images from the CSS files so that if an image needs to be changed, I only need to update the CSS file rather than each individual HTM ...

htmlcsstwitter-bootstrap

Is it possible to optimize javascript & css bundling for a static website using webpack?

I have been working on organizing my javascript files for a static HTML website. Currently, they are scattered across different HTML files using the script tag. To streamline this, I have created a main.js file that requires all the other files. This main ...

javascriptjqueryhtmlcsswebpack

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays

What causes my unordered list to vanish when I use the CSS float: right property?

Can anyone explain why my ul element disappears when I apply the float: right property in CSS? I'm currently working on the navigation for a website project. You can view the code snippet on CodePen by following this link: https://codepen.io/maximo ...

htmlcss