CODEWITHSUNDEEP
imagecss
Andresh Podzimovsky
Andresh Podzimovsky

Reputation: 1561

How to align inline image with text?

I have simple divs

<div class="ui-bar-a ui-corner-top">
    first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
    sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
    sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>

It looks like:

reload

I need it like:

reload2

I tried to set margin:auto align="middle", but it did not help

Upvotes: 15

Views: 23635

Answers (6)

Rikin Thakkar
Rikin Thakkar

Reputation: 1278

just put 

vertical-align:middle;

css for image. nothing else. you will get your output.

Upvotes: 4

Manish Prajapati
Manish Prajapati

Reputation: 585

use this code, below is the result as well as attached

enter image description here 

<div class="ui-bar-a">
sms1 | Status: <img src="status.png" style= "vertical-align:middle;"  />
</div>
 <div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img style= "vertical-align:middle;" src="status.png" />
</div>

Upvotes: 1

sumit kumar ray
sumit kumar ray

Reputation: 230

You can use: floting for making ,

<div class="ui-bar-a ui-corner-top"> 
<span>first_test</span> <span>|</span> <span>Status:<span> <img src="templates/style/images/reload.gif" />

.ui-corner-top{ overflow:hidden padding:5px 0; }

.ui-corner-top span{ float:left; display:block; padding:0 2px;

}

Upvotes: 0

Andi
Andi

Reputation: 1

Here an Example how to vertical align DIV's

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

Source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

You could use this CSS:

.ui-bar-a img, .ui-bar-a span{
    display:inline-block;
    vertical-align:top;
}
    .ui-bar-a img{
    margin-top:xxx; // as you requirment  
}

and this HTML: 

<div class="ui-bar-a">
    <span>Some text here </span>
    <img src="xxx.jpg"> 
</div>

Upvotes: 2

vivek
vivek

Reputation: 2004

try putting 

.ui-bar-a img{
    vertical-align: middle;
}

Upvotes: 16

Related Questions