Vertically top align sub children in a div html

Question

I am using following code

    <div style="margin-top: 10px; margin-left: 10px; width: 800px; height:110px; display:inline-block;" >

          <img src="images/about_us_logo.png" alt="" width="104" height="110" />
          <label class="aboutText" ><?php echo $store['description'] ?></label>
    </div>
    <br />
    <div style="margin-top: 10px; margin-left: 10px; display:inline-block;" >

          <img src="images/webaddress_about.png" alt="" width="70" height="67" />
          <label class="aboutText" ><?php echo $store['website'] ?></label>

    </div>

    <br />
    <div style="margin-top: 10px; margin-left: 10px; display:inline-block;" >

          <img src="images/email_about.png" alt="" width="70" height="49" />
          <label class="aboutText" ><?php echo $store['email'] ?></label>

    </div>
    <br />
    <div style="margin-top: 10px; margin-left: 10px; display:inline-block;" >

          <img src="images/phone_about.png" alt="" width="50" height="55" />
          <label class="aboutText" ><?php echo $store['phone'] ?></label>

    </div>



.aboutText
{
    margin: 10px 10x  10px 20px;
    padding: 5px 5px 5px 5px;
    color: #C7C7C7;
    width: 500px;
    height:110px;
    text-align:center;
    font-weight: bold;
}

The result is as under

The problem is the image and text is not aligned. I need the text to be placed on top align with image 2- The logo along with its description is overlapping the image below , what should i do to fix it

Answer 1

You just need to add this css rule to align sub-children to top:

img,label{
    vertical-align:top; /* vertically align */
}

But i think middle will fit best for this one

img,label{
    vertical-align:middle; /* vertically align */
}

Demo with top

Demo with middle

In case if description text is too long, this scenario will always be useful, Do it like this, add some css rule to your label CSS along with the above rules:

.aboutText
{
    margin: 10px 10x  10px 20px;
    padding: 5px 5px 5px 5px;
    color: #C7C7C7;
 /* width: 110px;*/ /*Get rid of height here
    height:500px;
    text-align:center;
    font-weight: bold;

    word-wrap:break-word;/* added new rule*/
    display:inline-block;/* added new rule*/
    text-align:left;   /* added new rule*/
}

Final Demo

Hope you need this.

Answer 2

Add the left align property for images

img
{
 text-align:left;
}