Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Vertically align text next to an image

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 473
    Comment on it

    Hey Readers!

    Web pages are incomplete without images. Images add visual appeal to our websites.

    There are situations when we want to put lines of text right next to an image. The text might be some sort of description of the image, or anything. The text will look good only if it is vertically aligned next to the image properly. 

    Doing this gets a little annoying even if trying out the simplest ways. 

    I am providing some easy approaches to achieve this.


     

    CSS TABLES

     Some might find this a little tricky.

    div {
        display:table;
    }
    
    span {
        vertical-align: middle;
        display: table-cell;
    }

    Sadly, the table property is not supported for IE7 and below. 


     

    FLEXBOX

    div {   
        display: flex; 
        align-items: center;    
    }
    
    img {
        min-width: 200px;
    }

     

    LINE HEIGHT

    This approach is the easiest. We set the line-height of the text equal to the height of the image.

    <div>
      <img style="width:30px; height:30px;">
      <span style="line-height:30px;">Some Text.</span>
    </div>

     

    VERTICAL-ALIGN:MIDDLE

    Set the vertical align property to the image.

    <div>
      <img style="vertical-align:middle" src="https://placehold.it/60x60">
      <span style="">Some Text.</span>
    </div>

     

    OUTPUT :

     

    Keep Coding!

    Vertically align text next to an image

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: