How to center text vertically with a large font-awesome icon

Question

Lets say I have a bootstrap button with a font-awesome icon and some text    lt div gt       lt i class  icon icon-2x icon-camera  gt  lt  i gt      hello world  lt  div gt    How do I make text appear vertically centered  Text is aligned with the bottom edge of the icon now  http   jsfiddle net V7DLm 1   EDIT  I have a possible solution  http   jsfiddle net CLdeG 1  but it feels a bit hacky - introduces extra p tag  uses pull-left and display table  Maybe someone can suggest an easier way

User · Answer

Another option to fine-tune the line height of an icon is by using a percentage of the vertical-align property  Usually  0  is a the bottom  and 100  at the top  but one could use negative values or more than a hundred to create interesting effects    my-element i fa       vertical-align  100      top     vertical-align  50      middle     vertical-align  0      bottom

User · Answer

I use icons next to text 99  of the time so I made the change globally    fa-2x     vertical-align  middle      Add 3x  4x  etc to the same definition as needed

User · Answer

if things aren t lining up  a simple line-height  inherit  via CSS on specific i fa elements that are having alignment issues could do the trick simply enough    You could also feasibly use a global solution  which due to a slightly higher CSS specificity will override FontAwesome s  fa rule which specifies line-height  1 without requiring  important on the property   i fa     line-height  inherit      Just make sure that the above global solution doesn t cause any other issues in places where you might also use FontAwesome icons

User · Answer

After considering all suggested options  the cleanest solution seems to be setting line-height and vertical-align everything   See Jsfiddle Demo  CSS   div       border  1px solid  ccc      display  inline-block      height  50px      margin  60px      padding  10px     text   ico       line-height  50px      ico       vertical-align  middle

User · Answer

The simplest way is to set the vertical-align css property to middle  i fa       vertical-align  middle

User · Answer

This worked well for me   i fa     line-height  100

User · Answer

I just had to do this myself  you need to do it the other way around    do not play with the vertical-align of your text play with the vertical align of the font-awesome icon    lt div gt     lt span class  icon icon-2x icon-camera  style   vertical-align  middle   gt  lt  span gt     lt span class  my-text  gt hello world lt  span gt   lt  div gt    Of course you could not use inline styles and target it with your own css class  But this works in a copy paste fashion   See here  Vertical alignment of text and icon in button  If it were up to me however  I would not use the icon-2x  And simply specify the font-size myself  as in the following   lt div class  my-fancy-container  gt       lt span class  my-icon icon-file-text  gt  lt  span gt       lt span class  my-text  gt Hello World lt  span gt   lt  div gt     my-icon       vertical-align  middle      font-size  40px      my-text       font-family   Courier-new       my-fancy-container       border  1px solid  ccc      border-radius  6px      display  inline-block      margin  60px      padding  10px      for a working example  please see JsFiddle

User · Answer

Simply define vertical-align property for the icon element   div  icon      vertical-align  middle

User · Answer

Try set your icon as height  100   You don t need to do anything with the wrapper  say  your button    This requires Font Awesome 5  Not sure if it works for older FA versions    wrap svg       height  100       Note that the icon is actually a svg graphic   Demo

User · Answer

a flexbox option - font awesome 4 7 and below  FA 4 x Hosted URL - https   stackpath bootstrapcdn com font-awesome 4 7 0 css font-awesome min css   x000D   x000D  div   x000D    display  inline-flex     make element size relative to content    x000D    align-items  center     vertical alignment of items    x000D    line-height  40px     vertically size by height  line-height or padding    x000D    padding  0px 10px     horizontal with padding-l r    x000D    border  1px solid  ccc  x000D    x000D   x000D     unnecessary styling below  ignore    x000D  body  display  flex justify-content  center align-items  center height  100vh  div i  margin-right  10px  div  background-color  hsla 0  0   87   0 5   div hover  background-color  hsla 34  100   52   0 5  cursor  pointer   x000D   lt link href  https   stackpath bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   lt div gt  x000D       lt i class  fa fa-2x fa-camera  gt  lt  i gt  x000D      hello world x000D   lt  div gt  x000D   x000D   x000D    fiddle  http   jsfiddle net Hastig V7DLm 180     using flex and font awesome 5  FA 5 x Hosted URL - https   use fontawesome com releases v5 0 8 js all js   x000D   x000D  div   x000D    display  inline-flex     make element size relative to content    x000D    align-items  center     vertical alignment of items    x000D    padding  3px 10px     horizontal vertical position with padding    x000D    border  1px solid  ccc  x000D    x000D   svg-inline--fa      target all FA icons    x000D    padding-right  10px  x000D    x000D   icon-camera  svg-inline--fa      target specific icon    x000D    font-size  50px  x000D    x000D     unnecessary styling below  ignore    x000D  body  display  flex justify-content  center align-items  center height  100vh  flex-direction  column  div margin  10px 0  div  background-color  hsla 0  0   87   0 5   div hover  background-color  hsla 212  100   63   1  cursor  pointer   x000D   lt script src  https   use fontawesome com releases v5 0 8 js all js  gt  lt  script gt  x000D   lt div class  icon-camera  gt  x000D       lt i class  fas fa-camera  gt  lt  i gt  x000D      hello world x000D   lt  div gt  x000D   lt div class  icon-clock  gt  x000D       lt i class  fas fa-clock  gt  lt  i gt  x000D      hello world x000D   lt  div gt  x000D   x000D   x000D    fiddle  https   jsfiddle net 3bpjvof2

User · Answer

When using a flexbox  vertical alignment of font awesome icons next to text can be very difficult  I tried margins and padding  but that moved all items  I tried different flex alignments like center  start  baseline  etc  to no avail  The easiest and cleanest way to adjust only the icon was to set it s containing div to position  relative  top  XX  This did the job perfectly

User · Answer

Well  this question was asked years ago  I think technology has changed quite a bit and browser compatibility is much better  You could use vertical-align but I would consider that some what less scaleable and less reusable  I would recommend a flexbox approach    Here is the same example the original poster used but with flexbox  It styles a single element  If a button size changes for whatever reason  it will continue to be vertically and horizontally centered     button       border  1px solid  ccc      height  40px      margin  60px      padding  4px      display  flex      justify-content  space-around      align-items  center      Example  JsFiddle

User · Answer

For those using Bootstrap 4 is simple    lt span class  align-middle  gt  lt i class  fas fa-camera  gt  lt  i gt  lt  span gt

User · Answer

I would wrap the text in a  so you can target it separately  Now if you float both  and  left  you can use line-height to control the vertical spacing of the   Setting it to the same height as the   30px  will middle align it  See here   New Markup     lt div gt       lt i class  icon icon-2x icon-camera  gt  lt  i gt       lt span id  text  gt hello world lt  span gt   lt  div gt    New CSS   div       border  1px solid  ccc      height  30px      margin  60px      padding  4px      vertical-align  middle    i      float  left     text      line-height  30px      float  left

[html] How to center text vertically with a large font-awesome icon?

Examples related to html

Examples related to css

Examples related to font-awesome