Place text exact middle beside to image

Question

Am trying to place text exactly middle in div (horizontally) beside to image , And it must be clickable

Below is code ,I tried so far ...

<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   #div {
    width: 128px;
    height: 35px;
    border: 2px solid #ccc;
   }
  </style>
<body>
<div id="div">Some service   
<a href="http://stackoverflow.com">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png"   alt="Stack Overflow" width="40" height="35"title="Click to return to Stack Overflow homepage" />
</a>
</div>  
</body>
</html>

Am trying to do like this image

Solution :

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div {
width: 128px;
height: 35px;
border: 2px solid #ccc;
}
</style>
<body>
<div id="div">sdasdasdasd   
<a href="http://stackoverflow.com">
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png"    alt="Stack Overflow" width="40" height="35"title="Click to return to Stack Overflow homepage" style="vertical-align:middle"" />
</a> 
</div>  
</body> 
</html>

Exact duplicate: http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css — Henrik Andersson, Feb 12 '13 at 04:45

score 0 · Answer 1 · answered Feb 12 '13 at 04:49

I think this is what you need? DEMO

<div id="div">  
<a href="http://stackoverflow.com">Some service 
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png"   alt="Stack Overflow" width="40" height="35"title="Click to return to Stack Overflow homepage" />
</a>
</div>

Place text exact middle beside to image

1 Answers1