3

It's part of my blog's logo. I have logo image and text inside the div. Now, the image is aligned middle but the text is not in the middle of the div. How can I do this without using margins? Here's my code:

<head>
<style type="text/css">
  #titleimage {
    background: red;
    display: inline-block;
  }
  #titleimage a {
    text-decoration: none;
  }
  #titleimage img {
    width: 33px;
    height: 36px;
    vertical-align: middle;
  }
  #titleimage span {
    color: white;
    font-family: sans-serif;
    font-size: 26px;
  }
</style>
</head>

<body>
  <div id="titleimage">
    <a href="#">
      <img src="images/vk8.png" /><span>PORTFOLIO</span>
    </a>
  </div>
</body>
Cookie Ninja
  • 1,156
  • 15
  • 29

3 Answers3

1

You can add vertical-align:middle to your #titleimage span

#titleimage{
    background: red;
    display: inline-block;
}
#titleimage a{
    text-decoration: none;
}
#titleimage img{
    width: 33px;
    height: 36px;
    vertical-align: middle;
}
#titleimage span{
    color: white;
    font-family: sans-serif;
    font-size: 26px;
    vertical-align:middle;
    }
Relisora
  • 1,163
  • 1
  • 15
  • 33
1

Just add vertical-align to your span tag.

 #titleimage span{
        color: white;
        font-family: sans-serif;
        font-size: 26px;
        vertical-align:middle;/*add this*/
    }
frnt
  • 8,455
  • 2
  • 22
  • 25
0

Add #titleimage span { vertical-align: middle; } and remove #titleimage img { vertical-align: middle; }

vignesh
  • 951
  • 5
  • 13