How to center inline blocks together with text vertically without space at bottom?

Question

I want to align all elements vertically centered, and using exactly 50px of height, but somehow I have 2 problems:

1. The items use more height than 50px (green color)
2. The ">" text is not vertically centered

---

HTML

<div>
    <a href="#"><ins class="logo"></ins></a>
    <b>›</b>
    ...
</div>

---

CSS

div {
    background:green;
}
a {
    display:inline-block;
}
.logo {
    display:inline-block;
    height:30px;
    padding:10px;
    background:blue;
}
b {
    line-height:50px;
    height:50px;
}

---

Result

---

JS-Fiddle example: http://jsfiddle.net/pG4y6/

---

How can I achieve this with changing the CSS?

Answer 1

div {
   background: none repeat scroll 0 0 #008000;
    display: block;
    height: 50px;
    vertical-align: middle;
}

Demo

Answer 2

In order to vertically center a line of text in a DIV, simply set line-height equal to height of div, so:

div
{
   line-height:50px;
}

To vertically center a div in another one, the most common tecnique is:

.logo 
{
    display:block;
    position:absolute;
    top:50%;
    margin-top:-25px;
}

So, in other words, offset 50% from the top and then push it up again with negative margin-top set to half box height.