How to vertically align a font-awesome icon inside a button using Bootstrap 3

I've been struggling to vertically align font-awesome arrows inside Bootstrap buttons. The goal is to have both the text and icons centered vertically within the buttons.

Whether the text wraps onto multiple lines or stays on one, the arrow icon should always be positioned in the middle of the button's total height.

I've spent hours trying to solve this issue with no success.

Below is the HTML markup I'm working with:


    <div class="container">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
            <button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
          </div>
</div>

For reference, here is the updated jsFiddle of my current progress. Please note that the red background of the icons should touch the top, bottom, and right edges of the button, unlike the current setup.

htmlcsstwitter-bootstraptwitter-bootstrap-3font-awesome

Answer №1

Adjust the display properties of both elements to inline-block and allocate a specific percentage of space to the span element, such as 90% / 10%. 

span {
    vertical-align:middle;
    display:inline-block;
    width:90%;
}

To eliminate padding, consider the following adjustments (you may want to introduce some left padding):

.btn-foo1,
.btn-foo2 {
    padding:0;
    border:0;
}

Modify the display property to inline block and remove the right float:

.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=
" icon-"] {
  background-color: red;
  display:inline-block;
  vertical-align:middle;
  padding:24px;
  width:10%;
}

Demo:

http://jsfiddle.net/9brbD/19/

Consider assigning a class to the span element instead of styling span {}; use myClass {} instead.

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

Troubleshooting: Why won't my HTML/CSS Background Image show up?

Struggling to set a background image for my webpage using CSS. The code I've used seems right, but the background remains blank. Here's my CSS snippet: body { background-image: url("Images/bg.png"); } hr { margin-left: 12%; margin-right: 12%; c ...

jqueryhtmlcss

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

Utilize Sass variables to store CSS font-size and line-height properties for seamless styling management

How can I save the font size and line height in a Sass variable, like so: $font-normal: 14px/21px; When using this declaration, I notice that a division occurs as explained in the Sass documentation. Is there a way to prevent this division from happening ...

csssass

What is the best method for users to add a div element and its contents?

As someone new to the world of web development, I am currently learning and working on a project. I have encountered an issue with creating a custom div that includes a link and user-defined text. I want the div to be generated automatically when the use ...

javascriptjqueryhtmlcss

AngularJS: ng-show causing flickering issue upon page refresh

Recently, I encountered an issue with my code snippet: <body> <ng-view></ng-view> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlcssangularjs

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss

Animation glitch when clicking on hamburger menu symbol

I am facing an issue where, in mobile window mode, if I click on the burger icon and then zoom out to a larger resolution and zoom back in to mobile size, clicking on the burger icon does not activate the slide-down menu as expected. You can see the issue ...

javascriptjqueryhtmlcsscss-animations

Certain CSS styles that functioned properly during development are not functioning as intended in the build version

When using vue.js, most of my css works well. However, some specific instances do not work as expected. An example of this is in Home.vue: <template> ... </template> <script> ... </script> <style> h1 {font-size:2.6em;font-wei ...

cssvue.js

How to Deactivate Horizontal Scrolling Using CSS in WordPress

Hey there, I'm currently working on a WordPress blog and facing an issue. Here's the link to my problem: When I resize the browser (X-Axis) to a minimum, like when using a mobile device, I noticed that I can scroll to the right in the Content se ...

phphtmlcsswordpressresponsive-design

Aligning cards in the center horizontally within a fluid container

I need help with centering two cards horizontally on my landing page. Each card is smaller and has the "col-md-3" class, but I can't seem to get them centered properly. Here's the CSS style snippet I tried: .card { margin: 0 auto; /* A ...

twitter-bootstrapbootstrap-4

Aligning elements in the middle of a div, from side to side

If you imagine a container div that is 100px wide, and inside it there are 3 smaller divs each 20px wide. I am wondering how to align these smaller divs so that they are centered within the container div, with a 20px gap on each side? ...

htmlcssalignment

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

Unique CSS styling technique

Is there a way to design a unique form similar to the one shown below using CSS? ...

css

Automatically adjust image size to match viewport dimensions without cutting off edges

I am facing a CSS challenge. The issue is with an image that has dimensions of 1024x500 pixels. When the browser window size decreases below the width of the image (1024px), the image starts to get cropped on the sides. I have set the container width to 10 ...

cssbrowserviewportimage-resizing

Utilize grids to ensure consistency in the width of every <li> element across the browser

Is there a way to make the ul element span the entire width of the webpage regardless of window size? http://jsfiddle.net/32hp1w5p/ ul { grid-column: 1/13; list-style-type: none; display: table; margin: 0 auto; } li { float: left; border: ...

htmlcss

Dynamic content within an HTML tree format

Data retrieved from the database is currently in the following format upon query execution [(‘Country-1’, ‘state1’), (‘Country-1’, ‘state2’), (‘Country-1’, ‘state3’), (‘Country-2’, ‘state1’), (‘Country-2’, ‘state2’) ...

javascriptpythonhtmldjangotreeview

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

React does not recognize CSS attributes

I am facing an issue with the CSS styling when using built-in tags like "form-group" in my code. Strangely, the browser does not apply the CSS when I use these built-in tags. However, if I define my own classes, such as "classes.form", the CSS is visible i ...

htmlcssreactjs

How to create a clickable link that functions as a file upload button

I am working on a project where I need to create a link that acts as a file input when clicked. Here is the code for the link: <a id="upload-file">Upload your photo</a> Is there a way to make this link function as a browse file input? Any ...

javascriptjqueryhtmlcss

Styling the HTML5 default audio player with CSS

I am attempting to adjust the background color of the play button within the default audio control using CSS, making it 100% transparent. Here is what I have already attempted: audio::-webkit-media-controls-play-button { background-color: rgba(0, 0, 0, ...

javascriptcsshtmlaudio