The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering?

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

element.style {
}
button {
    margin-right: 6px;
    margin-bottom: 6px;
}

.imi-btn {
    background-color: red;
    border: 1px solid transparent;
    padding: 0 15px;
    height: 32px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    outline: none;
}

.imi-icon {
    /* vertical-align: -0.05em; */
    cursor: pointer;
    display: inline-flex;
    margin-right: 5px;
    width: 17px;
    height: 17px;
}
<button  type="primary"  class="imi-btn imi-btn-primary">
    <designer-imi-icon>
      <i  class="imi-icon">
        <svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg" fill="white"><path  d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"></path><path  d="M0 0h24v24H0z" fill="none"></path></svg>
      </i>
    </designer-imi-icon> 
    My Event
  </button>

css

Answer №1

After making the necessary adjustments in the code, including adding display:inline-flex; and align-items:center to the button, the issue was successfully resolved.

element.style {
}
button {
    margin-right: 6px;
    margin-bottom: 6px;
    display:inline-flex;
    align-items:center;
}

.imi-btn {
    background-color: red;
    border: 1px solid transparent;
    padding: 0 15px;
    height: 32px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    outline: none;
}

.imi-icon {
    /* vertical-align: -0.05em; */
    cursor: pointer;
    display: inline-flex;
    margin-right: 5px;
    width: 17px;
    height: 17px;
}
<button  type="primary"  class="imi-btn imi-btn-primary">
    <designer-imi-icon>
      <i  class="imi-icon">
        <svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg" fill="white"><path  d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"></path><path  d="M0 0h24v24H0z" fill="none"></path></svg>
      </i>
    </designer-imi-icon> 
    My Event
  </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

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

htmlcsstwitter-bootstrap

Singularize button/solo in the center

How can I make this button align perfectly center on both PC and Mobile as a container? I have attempted the following CSS and HTML code: <section id="jour"> <div class="container"> <button class="btn1">Jeudi 12</button> ...

htmlcss

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

Aligning Cards using Bulma Styles

Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this projec ...

htmlcssresponsive-designflexboxbulma

Keep the button in a single color unless it is being hovered over

Is there a way to create a button that changes color on hover, then reverts back to its original color after it's clicked? I'm facing an issue where my button initially has a red gradient, then changes color when hovered over, but turns white on ...

jqueryhtmlcsshoverfocus

Eliminate all hover functionalities from the Kendo Menu component in ASP.NET MVC

Currently, I am working on a project and utilizing the Kendo Menu. However, the package includes hover styling that I do not want to use. Is there a way to disable or remove this styling? ...

cssasp.net-mvckendo-uikendo-asp.net-mvc

Set a div to have both absolute positioning and sticky behavior

Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...

htmlcss

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jqueryhtmlcsstabs

When hovering over A, the DIV element fails to appear

I'm encountering an issue with a specific page on my website () The problem lies with a .dropdown class that is supposed to display a DIV right below the header. In the source code, you can find it underneath <-- START DROPDOWN MENU -->. When I ...

htmlcsshover

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

Avoiding the appearance of a scrollbar when content extends beyond its containing block

I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper: The solution provided in this post didn't work for me: Absolutely positioned div on ri ...

htmlcssscrollbarbrowser-scrollbars

Guide to altering the red color of required fields in Joomla

Is there a way to change the color of the required input field in Joomla when it is empty? I'm looking for the code that controls this functionality. ...

cssinputjoomlacolorsrequired

Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll ...

jquerycss

Editing the dimensions of the input in Bootstrap 4

Is there a way to adjust the width of the input and select elements? I want the input element to take up more space while the select element occupies less space. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel=" ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

I am looking to understand how I can seamlessly transition from a hover-triggered animation to an exit-hover animation, regardless of where the hover animation is in progress. Currently, if I exit hover too quickly, the animation jumps back to its starting ...

jquerycssanimation

Bourbon encountering difficulty with font-face mixin in Rails version 3.2.2

After watching Ryan Bates' screencast on Bourbon, my application.css.scss file looks like this: @import "bourbon"; @import "main"; @import "events"; ..etc. In my main.css.scss stylesheet, I am able to use the @include transition() mixin without any ...

cssruby-on-railssassbourbon

AngularJS fails to prioritize the following element

Here is my HTML code: <div ng-app="app"> <form> <div class="form-group"> <label >Username</label> <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> ...

javascriptjqueryhtmlcssangularjs