Menu
I'm having trouble vertically aligning a font-awesome icon with text within a button under the Bootstrap framework. I've tried so many things including setting the line-height, but nothing is working.
<button id="edit-listing-form-house_Continue" class="btn btn-large btn-primary" style="" value="" name="Continue" type="submit"> Continue <i class="icon-ok" style="font-size:40px;"></i> </button> http://jsfiddle.net/fPXFY/
How can I get this to work?
693
Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.
If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
Other than flexbox property, we can also center align the button horizontally and vertically using a set of CSS properties. Add position: relative to the container class and position: absolute to the class containing the button. Now use left:50% and top:50% to position the button to the center of the container.
We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.
There is one rule that is set by font-awesome.css, which you need to override.
You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I've corrected here:
<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit"> <span>Continue</span> <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> </button> Example here: http://jsfiddle.net/fPXFY/4/ and the output of which is:
I've downsized the font-size of the icon above in this instance to 30px, as it feels too big at 40px for the size of the button, but this is purely a personal viewpoint. You could increase the padding on the button to compensate if required:
<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit"> <span>Continue</span> <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> </button> Producing: http://jsfiddle.net/fPXFY/5/ the output of which is:
186
Alternativly if your using bootstrap then you can just add align-middle to vertical align the element.
<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">Continue <i class="icon-ok align-middle" style="font-size:40px;"></i> </button> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
