Vertically aligning CSS before and after content

Question

I am trying to centre the link with the image  but can t seem to move the content vertically in any way     lt h4 gt More Information lt  h4 gt   lt a href     class  pdf  gt File Name lt  a gt    The icon is 22 x 22px   pdf       font-size  12px     pdf before       padding 0 5px 0 0      content  url    img icon pdf small png      pdf after       content       pdf         font-size  10px     pdf hover after       color   000

User · Answer

I m no CSS expert  but what happens if you put vertical-align  middle  into your  pdf before directive

User · Answer

I spent a good amount of time trying to work this out today  and couldn t get things working using line-height or vertical-align  The easiest solution I was able to find was to set the  lt a  gt  to be relatively positioned so it would contain absolutes  and the  after to be positioned absolutely taking it out of the flow   a      position relative      padding-right 18px    a after      position absolute      content url image png       The after image seemed to automatically center in that case  at least under Firefox Chrome  Such may be a bit sloppier for browsers not supporting  after  due to the excess spacing on the  lt a  gt

User · Answer

This is what worked for me    pdf  before       content  url  path to image png        display  flex      align-items  center      justify-content  center      height  inherit

User · Answer

I had a similar problem  Here is what I did  Since the element I was trying to center vertically had height   60px  I managed to center it vertically using   top  calc 50  - 30px

User · Answer

Using flexboxes did the trick for me    pdf before       display  flex      align-items  center      justify-content  center

User · Answer

You can also use tables to accomplish this  like    pdf     display  table     pdf before     display  table-cell    vertical-align  middle      Here is an example  https   jsfiddle net ar9fadd0 2   EDIT  You can also use flex to accomplish this    pdf     display  flex     pdf before     display  flex    align-items  center      Here is an example  https   jsfiddle net ctqk0xq1 1

User · Answer

Answered my own question after reading your advice on the vertical-align CSS attribute  Thanks for the tip    pdf before       padding  0 5px 0 0      content  url    img icon pdf small png       vertical-align  -50

User · Answer

I just found a pretty neat solution  I think  The trick is to set the line-height of image  or any content  height   text  Using CSS   div    line-height  26px     height of the image in  submit span after       span after      content  url  images forward png        vertical-align  bottom      That would probably also work without the span

User · Answer

I think a cleaner approach is to inherit the vertical alignment   In html    lt div class  shortcut  gt  lt a href     gt Download lt  a gt  lt  div gt    And in css    shortcut       vertical-align  middle     shortcut  gt  a after       vertical-align  inherit      This way the icon will align properly in any resolution font-size combination  Great for use with icon fonts

User · Answer

Messing around with the line-height attribute should do the trick  I haven t tested this  so the exact value may not be right  but start with 1 5em  and tweak it in 0 1 increments until it lines up    pdf  line-height 1 5em

[css] Vertically aligning CSS :before and :after content

Examples related to css

Examples related to css-content