Vertically align text next to an image

Question

Why won t vertical-align  middle work   And yet  vertical-align  top does work   x000D   x000D  span    vertical-align  middle    x000D   lt div gt     lt img src  https   via placeholder com 30  alt  small img    gt     lt span gt Doesn t work  lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

Haven t seen a solution with margin in any of these answers yet  so here is my solution to this problem   This solution only works if you know the width of your image   The HTML   lt div gt       lt img src  https   placehold it 80x80  gt       lt span gt This is my very long text what should align  This is my very long text what should align  lt  span gt   lt  div gt    The CSS  div     overflow hidden    img      width 80px    margin-right 20px     display inline-block     vertical-align middle    span      width 100      margin-right -100px     padding-right 100px     display inline-block     vertical-align middle     box-sizing border-box     -moz-box-sizing border-box     -webkit-box-sizing border-box

User · Answer

Use line-height 30px for the span so that text is align with the image    lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt

User · Answer

Actually  in this case it s quite simple  apply the vertical align to the image  Since it s all in one line  it s really the image you want aligned  not the text    x000D   x000D   lt  -- moved  vertical-align middle  style from span to img -- gt  x000D   lt div gt  x000D     lt img style  vertical-align middle  src  https   placehold it 60x60  gt  x000D     lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Tested in FF3   Now you can use flexbox for this type of layout    x000D   x000D   box   x000D     display  flex  x000D     align-items center  x000D    x000D   lt div class  box  gt  x000D       lt img src  https   placehold it 60x60  gt  x000D       lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You probably want this    lt div gt      lt img style  width 30px  height 30px   gt      lt span style  vertical-align 50   line-height 30px   gt Didn t work  lt  span gt   lt  div gt    As others have suggested  try vertical-align on the image    lt div gt      lt img style  width 30px  height 30px  vertical-align middle   gt      lt span gt Didn t work  lt  span gt   lt  div gt    CSS isn t annoying   You just don t read the documentation    P

User · Answer

You probably want this    lt div gt      lt img style  width 30px  height 30px   gt      lt span style  vertical-align 50   line-height 30px   gt Didn t work  lt  span gt   lt  div gt    As others have suggested  try vertical-align on the image    lt div gt      lt img style  width 30px  height 30px  vertical-align middle   gt      lt span gt Didn t work  lt  span gt   lt  div gt    CSS isn t annoying   You just don t read the documentation    P

User · Answer

This code works in IE as well as FF    lt div gt     lt img style  width auto  height auto vertical-align  middle   gt     lt span gt It does work on all browsers lt  span gt   lt  div gt

User · Answer

Change your div into a flex container   div   display flex       Now there are two methods to center the alignments for all the content   Method 1   div   align-items center      DEMO      Method 2   div     margin-top auto  margin-bottom auto      DEMO      Try different width and height values on the img and different font size values on the span and you ll see they always remain in the middle of the container

User · Answer

Using flex property in css   To align text vertically center by using in flex using align-items center  if you want to align text horizontally center by using in flex using justify-content center     x000D   x000D  div    display  flex    align-items  center    x000D   lt div gt     lt img src  http   lorempixel com 30 30   alt  small img    gt     lt span gt It works  lt  span gt   lt  div gt  x000D   x000D   x000D   Using table-cell in css   x000D   x000D  div    display  table    div      display  table-cell    vertical-align  middle    x000D   lt div gt     lt img src  http   lorempixel com 30 30   alt  small img    gt     lt span gt It works  lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

Another thing you can do is set the text s line-height to the size of the images within the  lt div gt   Then set the images to vertical-align  middle   That s seriously the easiest way

User · Answer

It can be confusing  I agree  Try utilizing table features  I use this simple CSS trick to position modals at the center of the webpage  It has large browser support    lt div class  table  gt       lt div class  cell  gt           lt img src       alt         gt           lt span gt It works now lt  span gt       lt  div gt   lt  div gt    and CSS part    table   display  table     cell   display  table-cell  vertical-align  middle      Note that you have to style and adjust the size of image and table container to make it work as you desire  Enjoy

User · Answer

The technique used in the accepted answer works only for single-lined text  demo   but not multi-line text  demo  - as noted there   If anyone needs to vertically center multi-lined text to an image  here are a few ways  Methods 1 and 2 inspired by this CSS-Tricks article   Method  1  CSS tables  FIDDLE   IE8   caniuse    CSS   div       display  table    span       vertical-align  middle      display  table-cell      Method  2  Pseudo element on container  FIDDLE   IE8    CSS   div      height  200px     height of image       div before     content        display  inline-block    height  100     vertical-align  middle    margin-right  -0 25em     Adjusts for spacing       img       position  absolute     span     display  inline-block    vertical-align  middle    margin-left  200px      width of image        Method  3  Flexbox  FIDDLE   caniuse   CSS  The above fiddle contains vendor prefixes    div          display  flex       align-items  center        img       min-width  200px     width of image

User · Answer

For the record  alignment  commands  shouldn t work on a SPAN  because it is an in-line tag  not a block-level tag   Things like alignment  margin  padding  etc won t work on an in-line tag because the point of inline is not to disrupt the text flow   CSS divides HTML tags up into two groups  in-line and block-level   Search  css block vs inline  and a great article shows up     http   www webdesignfromscratch com html-css css-block-and-inline    Understanding core CSS principles is a key to it not being quite so annoying

User · Answer

This code works in IE as well as FF    lt div gt     lt img style  width auto  height auto vertical-align  middle   gt     lt span gt It does work on all browsers lt  span gt   lt  div gt

User · Answer

Firstly inline CSS is not recommended at all  it really mess up your HTML   For aligning image and span  you can simply do vertical-align middle   x000D   x000D   align-middle   x000D    vertical-align  middle  x000D    x000D   lt div gt  x000D     lt img class  align-middle  src  https   i stack imgur com ymxaR png  gt  x000D     lt span class  align-middle  gt I m in the middle of the image  thanks to CSS  hooray  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

background url    images red bullet jpg  left 3px no-repeat    I generally use 3px in place of top  By increasing decreasing that value  the image can be changed to the required height

User · Answer

Haven t seen a solution with margin in any of these answers yet  so here is my solution to this problem   This solution only works if you know the width of your image   The HTML   lt div gt       lt img src  https   placehold it 80x80  gt       lt span gt This is my very long text what should align  This is my very long text what should align  lt  span gt   lt  div gt    The CSS  div     overflow hidden    img      width 80px    margin-right 20px     display inline-block     vertical-align middle    span      width 100      margin-right -100px     padding-right 100px     display inline-block     vertical-align middle     box-sizing border-box     -moz-box-sizing border-box     -webkit-box-sizing border-box

User · Answer

Multiline solution   http   jsfiddle net zH58L 6    lt div style  display table width 30px height 160px   gt       lt img style  display table-cell width 30px height 60px padding 50px  src         gt       lt div style  display table-cell height 30px vertical-align middle  gt        Multiline text centered vertically      lt  div gt   lt  div gt   lt  -- note  img  height   2x padding  must be equal to root div height -- gt    Works in all browers and ie9

User · Answer

Here are some simple techniques for vertical-align   One-line vertical-align middle  This one is easy  set the line-height of the text element to equal that of the container   lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt    Multiple-lines vertical-align bottom  Absolutely position an inner div relative to its container   lt div style  position relative width 30px height 60px   gt     lt div style  position absolute bottom 0  gt This is positioned on the bottom lt  div gt   lt  div gt    Multiple-lines vertical-align middle   lt div style  display table width 30px height 60px   gt     lt div style  display table-cell height 30px   gt This is positioned in the middle lt  div gt   lt  div gt    If you must support ancient versions of IE  lt   7  In order to get this to work correctly across the board  you ll have to hack the CSS a bit  Luckily  there is an IE bug that works in our favor  Setting top 50  on the container and top -50  on the inner div  you can achieve the same result  We can combine the two using another feature IE doesn t support  advanced CSS selectors    lt style type  text css  gt     container       width  30px      height  60px      position  relative         wrapper  gt   container       display  table      position  static         container div       position  absolute      top  50          container div div       position  relative      top  -50          container  gt  div       display  table-cell      vertical-align  middle      position  static       lt  style gt    lt div id  wrapper  gt     lt div id  container  gt       lt div gt  lt div gt  lt p gt Works in everything  lt  p gt  lt  div gt  lt  div gt     lt  div gt   lt  div gt    Variable container height vertical-align middle  This solution requires a slightly more modern browser than the other solutions  as it makes use of the transform  translateY property   http   caniuse com  feat transforms2d   Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element   position  relative  top  50   transform  translateY -50

User · Answer

On a button in jQuery mobile  for instance  you can tweak it a bit by applying this style to the image    btn-image       vertical-align middle      margin 0 0 3px 0

User · Answer

Firstly inline CSS is not recommended at all  it really mess up your HTML   For aligning image and span  you can simply do vertical-align middle   x000D   x000D   align-middle   x000D    vertical-align  middle  x000D    x000D   lt div gt  x000D     lt img class  align-middle  src  https   i stack imgur com ymxaR png  gt  x000D     lt span class  align-middle  gt I m in the middle of the image  thanks to CSS  hooray  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Because you have to set the line-height to the height of the div for this to work

User · Answer

You can set image as inline element using display property   x000D   x000D   lt div gt  x000D     lt img style  vertical-align  middle  display  inline   src  https   placehold it 60x60  gt  x000D     lt span style  vertical-align  middle  display  inline   gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Because you have to set the line-height to the height of the div for this to work

User · Answer

Not sure as to why it doesn t render it on your navigation s browser  but I normally use an snippet like this when trying to display a header with an image and a centered text  hope it helps   https   output jsbin com jeqorahupo               lt hgroup style  display block  text-align center   vertical-align middle   margin inherit auto  padding inherit auto  max-height inherit  gt                lt header style  background url  http   lorempixel com 30 30    center center no-repeat  background-size auto  display inner-block  vertical-align middle  position relative  position absolute  top inherit  left inherit  display  -webkit-box  display  -webkit-flex display  -moz-box display  -ms-flexbox display  flex -webkit-flex-align  center -ms-flex-align  center -webkit-align-items  center align-items  center   gt                lt image src  http   lorempixel com 60 60   title  Img title  style  opacity 0 35  gt  lt  img gt                      http   lipsum org lt  header gt                       lt  hgroup gt

User · Answer

Here are some simple techniques for vertical-align   One-line vertical-align middle  This one is easy  set the line-height of the text element to equal that of the container   lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt    Multiple-lines vertical-align bottom  Absolutely position an inner div relative to its container   lt div style  position relative width 30px height 60px   gt     lt div style  position absolute bottom 0  gt This is positioned on the bottom lt  div gt   lt  div gt    Multiple-lines vertical-align middle   lt div style  display table width 30px height 60px   gt     lt div style  display table-cell height 30px   gt This is positioned in the middle lt  div gt   lt  div gt    If you must support ancient versions of IE  lt   7  In order to get this to work correctly across the board  you ll have to hack the CSS a bit  Luckily  there is an IE bug that works in our favor  Setting top 50  on the container and top -50  on the inner div  you can achieve the same result  We can combine the two using another feature IE doesn t support  advanced CSS selectors    lt style type  text css  gt     container       width  30px      height  60px      position  relative         wrapper  gt   container       display  table      position  static         container div       position  absolute      top  50          container div div       position  relative      top  -50          container  gt  div       display  table-cell      vertical-align  middle      position  static       lt  style gt    lt div id  wrapper  gt     lt div id  container  gt       lt div gt  lt div gt  lt p gt Works in everything  lt  p gt  lt  div gt  lt  div gt     lt  div gt   lt  div gt    Variable container height vertical-align middle  This solution requires a slightly more modern browser than the other solutions  as it makes use of the transform  translateY property   http   caniuse com  feat transforms2d   Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element   position  relative  top  50   transform  translateY -50

User · Answer

Write these span properties  span      display inline-block      vertical-align middle      Use display inline-block  When you use vertical-align property Those are assosiated properties

User · Answer

You can set image as inline element using display property   x000D   x000D   lt div gt  x000D     lt img style  vertical-align  middle  display  inline   src  https   placehold it 60x60  gt  x000D     lt span style  vertical-align  middle  display  inline   gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Multiline solution   http   jsfiddle net zH58L 6    lt div style  display table width 30px height 160px   gt       lt img style  display table-cell width 30px height 60px padding 50px  src         gt       lt div style  display table-cell height 30px vertical-align middle  gt        Multiline text centered vertically      lt  div gt   lt  div gt   lt  -- note  img  height   2x padding  must be equal to root div height -- gt    Works in all browers and ie9

User · Answer

Basically  you ll have to get down to CSS3   -moz-box-align  center  -webkit-box-align  center

User · Answer

Actually  in this case it s quite simple  apply the vertical align to the image  Since it s all in one line  it s really the image you want aligned  not the text    x000D   x000D   lt  -- moved  vertical-align middle  style from span to img -- gt  x000D   lt div gt  x000D     lt img style  vertical-align middle  src  https   placehold it 60x60  gt  x000D     lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Tested in FF3   Now you can use flexbox for this type of layout    x000D   x000D   box   x000D     display  flex  x000D     align-items center  x000D    x000D   lt div class  box  gt  x000D       lt img src  https   placehold it 60x60  gt  x000D       lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It can be confusing  I agree  Try utilizing table features  I use this simple CSS trick to position modals at the center of the webpage  It has large browser support    lt div class  table  gt       lt div class  cell  gt           lt img src       alt         gt           lt span gt It works now lt  span gt       lt  div gt   lt  div gt    and CSS part    table   display  table     cell   display  table-cell  vertical-align  middle      Note that you have to style and adjust the size of image and table container to make it work as you desire  Enjoy

User · Answer

You probably want this    lt div gt      lt img style  width 30px  height 30px   gt      lt span style  vertical-align 50   line-height 30px   gt Didn t work  lt  span gt   lt  div gt    As others have suggested  try vertical-align on the image    lt div gt      lt img style  width 30px  height 30px  vertical-align middle   gt      lt span gt Didn t work  lt  span gt   lt  div gt    CSS isn t annoying   You just don t read the documentation    P

User · Answer

Not sure as to why it doesn t render it on your navigation s browser  but I normally use an snippet like this when trying to display a header with an image and a centered text  hope it helps   https   output jsbin com jeqorahupo               lt hgroup style  display block  text-align center   vertical-align middle   margin inherit auto  padding inherit auto  max-height inherit  gt                lt header style  background url  http   lorempixel com 30 30    center center no-repeat  background-size auto  display inner-block  vertical-align middle  position relative  position absolute  top inherit  left inherit  display  -webkit-box  display  -webkit-flex display  -moz-box display  -ms-flexbox display  flex -webkit-flex-align  center -ms-flex-align  center -webkit-align-items  center align-items  center   gt                lt image src  http   lorempixel com 60 60   title  Img title  style  opacity 0 35  gt  lt  img gt                      http   lipsum org lt  header gt                       lt  hgroup gt

User · Answer

Actually  in this case it s quite simple  apply the vertical align to the image  Since it s all in one line  it s really the image you want aligned  not the text    x000D   x000D   lt  -- moved  vertical-align middle  style from span to img -- gt  x000D   lt div gt  x000D     lt img style  vertical-align middle  src  https   placehold it 60x60  gt  x000D     lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Tested in FF3   Now you can use flexbox for this type of layout    x000D   x000D   box   x000D     display  flex  x000D     align-items center  x000D    x000D   lt div class  box  gt  x000D       lt img src  https   placehold it 60x60  gt  x000D       lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt    block-system-branding-block    flex  0 1 40      media screen and  min-width  48em     block-system-branding-block   flex  0 1 420px  margin  2 5rem 0  text-align  left       flex-containerrow   display  flex     flex-containerrow  gt  div     justify-content  center  align-items  center        flex-containercolumn   display  flex  flex-direction  column     flex-containercolumn  gt  div     width  300px   margin  10px   text-align  left   line-height  20px   font-size  16px     flex-containercolumn   gt  site-slogan  font-size  12px    flex-containercolumn  gt  div  gt  span  font-size  12px    lt  style gt   lt  head gt   lt body gt   lt div id  block-umami-branding  class  block-system block-  system-branding-block  gt     lt div class  flex-containerrow  gt    lt div gt     lt a href     rel  home  class  site-logo  gt     lt img src  https   placehold it 120x120  alt  Home  gt   lt  a gt   lt  div gt  lt div class  flex-containerrow  gt  lt div class  flex-containercolumn  gt     lt div class  site-name   gt       lt a href     title  Home  rel  home  gt This is my sitename lt  a gt      lt  div gt       lt div class  site-slogan   gt  lt span gt Department of Test   Ministry of Test     TGoII lt  span gt  lt  div gt    lt  div gt  lt  div gt   lt  div gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

Here are some simple techniques for vertical-align   One-line vertical-align middle  This one is easy  set the line-height of the text element to equal that of the container   lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt    Multiple-lines vertical-align bottom  Absolutely position an inner div relative to its container   lt div style  position relative width 30px height 60px   gt     lt div style  position absolute bottom 0  gt This is positioned on the bottom lt  div gt   lt  div gt    Multiple-lines vertical-align middle   lt div style  display table width 30px height 60px   gt     lt div style  display table-cell height 30px   gt This is positioned in the middle lt  div gt   lt  div gt    If you must support ancient versions of IE  lt   7  In order to get this to work correctly across the board  you ll have to hack the CSS a bit  Luckily  there is an IE bug that works in our favor  Setting top 50  on the container and top -50  on the inner div  you can achieve the same result  We can combine the two using another feature IE doesn t support  advanced CSS selectors    lt style type  text css  gt     container       width  30px      height  60px      position  relative         wrapper  gt   container       display  table      position  static         container div       position  absolute      top  50          container div div       position  relative      top  -50          container  gt  div       display  table-cell      vertical-align  middle      position  static       lt  style gt    lt div id  wrapper  gt     lt div id  container  gt       lt div gt  lt div gt  lt p gt Works in everything  lt  p gt  lt  div gt  lt  div gt     lt  div gt   lt  div gt    Variable container height vertical-align middle  This solution requires a slightly more modern browser than the other solutions  as it makes use of the transform  translateY property   http   caniuse com  feat transforms2d   Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element   position  relative  top  50   transform  translateY -50

User · Answer

Here are some simple techniques for vertical-align   One-line vertical-align middle  This one is easy  set the line-height of the text element to equal that of the container   lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt    Multiple-lines vertical-align bottom  Absolutely position an inner div relative to its container   lt div style  position relative width 30px height 60px   gt     lt div style  position absolute bottom 0  gt This is positioned on the bottom lt  div gt   lt  div gt    Multiple-lines vertical-align middle   lt div style  display table width 30px height 60px   gt     lt div style  display table-cell height 30px   gt This is positioned in the middle lt  div gt   lt  div gt    If you must support ancient versions of IE  lt   7  In order to get this to work correctly across the board  you ll have to hack the CSS a bit  Luckily  there is an IE bug that works in our favor  Setting top 50  on the container and top -50  on the inner div  you can achieve the same result  We can combine the two using another feature IE doesn t support  advanced CSS selectors    lt style type  text css  gt     container       width  30px      height  60px      position  relative         wrapper  gt   container       display  table      position  static         container div       position  absolute      top  50          container div div       position  relative      top  -50          container  gt  div       display  table-cell      vertical-align  middle      position  static       lt  style gt    lt div id  wrapper  gt     lt div id  container  gt       lt div gt  lt div gt  lt p gt Works in everything  lt  p gt  lt  div gt  lt  div gt     lt  div gt   lt  div gt    Variable container height vertical-align middle  This solution requires a slightly more modern browser than the other solutions  as it makes use of the transform  translateY property   http   caniuse com  feat transforms2d   Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element   position  relative  top  50   transform  translateY -50

User · Answer

Using flex property in css   To align text vertically center by using in flex using align-items center  if you want to align text horizontally center by using in flex using justify-content center     x000D   x000D  div    display  flex    align-items  center    x000D   lt div gt     lt img src  http   lorempixel com 30 30   alt  small img    gt     lt span gt It works  lt  span gt   lt  div gt  x000D   x000D   x000D   Using table-cell in css   x000D   x000D  div    display  table    div      display  table-cell    vertical-align  middle    x000D   lt div gt     lt img src  http   lorempixel com 30 30   alt  small img    gt     lt span gt It works  lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

The technique used in the accepted answer works only for single-lined text  demo   but not multi-line text  demo  - as noted there   If anyone needs to vertically center multi-lined text to an image  here are a few ways  Methods 1 and 2 inspired by this CSS-Tricks article   Method  1  CSS tables  FIDDLE   IE8   caniuse    CSS   div       display  table    span       vertical-align  middle      display  table-cell      Method  2  Pseudo element on container  FIDDLE   IE8    CSS   div      height  200px     height of image       div before     content        display  inline-block    height  100     vertical-align  middle    margin-right  -0 25em     Adjusts for spacing       img       position  absolute     span     display  inline-block    vertical-align  middle    margin-left  200px      width of image        Method  3  Flexbox  FIDDLE   caniuse   CSS  The above fiddle contains vendor prefixes    div          display  flex       align-items  center        img       min-width  200px     width of image

User · Answer

You probably want this    lt div gt      lt img style  width 30px  height 30px   gt      lt span style  vertical-align 50   line-height 30px   gt Didn t work  lt  span gt   lt  div gt    As others have suggested  try vertical-align on the image    lt div gt      lt img style  width 30px  height 30px  vertical-align middle   gt      lt span gt Didn t work  lt  span gt   lt  div gt    CSS isn t annoying   You just don t read the documentation    P

User · Answer

background url    images red bullet jpg  left 3px no-repeat    I generally use 3px in place of top  By increasing decreasing that value  the image can be changed to the required height

User · Answer

Basically  you ll have to get down to CSS3   -moz-box-align  center  -webkit-box-align  center

User · Answer

Because you have to set the line-height to the height of the div for this to work

User · Answer

You have to apply vertical-align  middle to both elements to have it been centered perfectly    x000D   x000D   lt div gt  x000D     lt img style  vertical-align middle  src  http   lorempixel com 60 60   gt  x000D     lt span style  vertical-align middle  gt Perfectly centered lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The accepted answer does center the icon around half of the x-height of the text next to it  as defined in the CSS specs   Which might be good enough but can look a little bit off  if the text has ascenders or descenders standing out just at top or bottom     On the left  the text is not aligned  on the right it is as shown above  A live demo can be found in this article about vertical-align   Has anyone talked about why vertical-align  top works in the scenario  The image in the question is probably taller than the text and thus defines the top edge of the line box  vertical-align  top on the span element then just positions it at the top of the line box    The main difference in behavior between vertical-align  middle and top is that the first moves elements relative to the box s baseline  which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable  and the second relative to the outer bounds of the line box  which is more tangible

User · Answer

You have to apply vertical-align  middle to both elements to have it been centered perfectly    x000D   x000D   lt div gt  x000D     lt img style  vertical-align middle  src  http   lorempixel com 60 60   gt  x000D     lt span style  vertical-align middle  gt Perfectly centered lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The accepted answer does center the icon around half of the x-height of the text next to it  as defined in the CSS specs   Which might be good enough but can look a little bit off  if the text has ascenders or descenders standing out just at top or bottom     On the left  the text is not aligned  on the right it is as shown above  A live demo can be found in this article about vertical-align   Has anyone talked about why vertical-align  top works in the scenario  The image in the question is probably taller than the text and thus defines the top edge of the line box  vertical-align  top on the span element then just positions it at the top of the line box    The main difference in behavior between vertical-align  middle and top is that the first moves elements relative to the box s baseline  which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable  and the second relative to the outer bounds of the line box  which is more tangible

User · Answer

Another thing you can do is set the text s line-height to the size of the images within the  lt div gt   Then set the images to vertical-align  middle   That s seriously the easiest way

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt    block-system-branding-block    flex  0 1 40      media screen and  min-width  48em     block-system-branding-block   flex  0 1 420px  margin  2 5rem 0  text-align  left       flex-containerrow   display  flex     flex-containerrow  gt  div     justify-content  center  align-items  center        flex-containercolumn   display  flex  flex-direction  column     flex-containercolumn  gt  div     width  300px   margin  10px   text-align  left   line-height  20px   font-size  16px     flex-containercolumn   gt  site-slogan  font-size  12px    flex-containercolumn  gt  div  gt  span  font-size  12px    lt  style gt   lt  head gt   lt body gt   lt div id  block-umami-branding  class  block-system block-  system-branding-block  gt     lt div class  flex-containerrow  gt    lt div gt     lt a href     rel  home  class  site-logo  gt     lt img src  https   placehold it 120x120  alt  Home  gt   lt  a gt   lt  div gt  lt div class  flex-containerrow  gt  lt div class  flex-containercolumn  gt     lt div class  site-name   gt       lt a href     title  Home  rel  home  gt This is my sitename lt  a gt      lt  div gt       lt div class  site-slogan   gt  lt span gt Department of Test   Ministry of Test     TGoII lt  span gt  lt  div gt    lt  div gt  lt  div gt   lt  div gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

For the record  alignment  commands  shouldn t work on a SPAN  because it is an in-line tag  not a block-level tag   Things like alignment  margin  padding  etc won t work on an in-line tag because the point of inline is not to disrupt the text flow   CSS divides HTML tags up into two groups  in-line and block-level   Search  css block vs inline  and a great article shows up     http   www webdesignfromscratch com html-css css-block-and-inline    Understanding core CSS principles is a key to it not being quite so annoying

User · Answer

On a button in jQuery mobile  for instance  you can tweak it a bit by applying this style to the image    btn-image       vertical-align middle      margin 0 0 3px 0

User · Answer

Write these span properties  span      display inline-block      vertical-align middle      Use display inline-block  When you use vertical-align property Those are assosiated properties

User · Answer

Because you have to set the line-height to the height of the div for this to work

User · Answer

Actually  in this case it s quite simple  apply the vertical align to the image  Since it s all in one line  it s really the image you want aligned  not the text    x000D   x000D   lt  -- moved  vertical-align middle  style from span to img -- gt  x000D   lt div gt  x000D     lt img style  vertical-align middle  src  https   placehold it 60x60  gt  x000D     lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Tested in FF3   Now you can use flexbox for this type of layout    x000D   x000D   box   x000D     display  flex  x000D     align-items center  x000D    x000D   lt div class  box  gt  x000D       lt img src  https   placehold it 60x60  gt  x000D       lt span style    gt Works  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use line-height 30px for the span so that text is align with the image    lt div gt     lt img style  width 30px  height 30px   gt     lt span style  line-height 30px   gt Doesn t work  lt  span gt   lt  div gt

User · Answer

Change your div into a flex container   div   display flex       Now there are two methods to center the alignments for all the content   Method 1   div   align-items center      DEMO      Method 2   div     margin-top auto  margin-bottom auto      DEMO      Try different width and height values on the img and different font size values on the span and you ll see they always remain in the middle of the container

[html] Vertically align text next to an image?

The HTML

The CSS

Examples related to html

Examples related to css

Examples related to alignment

Examples related to vertical-alignment