Centre CSS verticalement en 2 divs flottants

Question

J'ai un div avec 2 divs flottants.
Sur la gauche 3 boutons et sur les liens de droite dans un paragraphe, une seule ligne.
Lorsque les liens à droite deviennent trop longs (ou que je choisis plus de bottons), le paragraphe devient multiligne et j'aimerais que mes boutons soient centrés verticalement. Dans mon exemple, le nom en gras "Joe Smith" fonctionne très bien, mais s'il devient "Joe Smith Brown Jones" j'ai besoin de mes boutons pour centrer. See an example here

CSS:

body { color: #CCCCCC; font-family: 'Lucida Grande', 'Trebuchet MS'; font-size: 100%; } 
a, a:link, a:visited, a:focus { color:#4188FB; } 
a:active, a:hover { color:#FFCC00; } 
.clearboth { clear:both; } 

/* header */ 
.admin-header { 
    width: 700px; 
    padding: 15px 10px; 
    background: #505050; 
} 
.admin-header-left { 
    float: left; 
} 
.admin-header-right { 
    margin-right: 0px; 
} 
.admin-header-right p { 
    text-align: right; 
    line-height: 150%; 
} 

/* buttons */ 
a.nav-btn, a.nav-btn:link, a.nav-btn:visited, a.nav-btn:focus { padding: 5px 15px; margin-right: 2px; text-decoration: none; color: white; background-color: #4188FB; } 
a.nav-btn:active, a.nav-btn:hover { color: white; background-color: #FFCC00; } 

.rounded-left { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -opera-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } 
.rounded-right { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -opera-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } 

HTML:

<div class="admin-header"> 
    <div class="admin-header-left"> 
     <a class="nav-btn rounded-left" href="#">New Order</a><a class="nav-btn" href="#">Invoices</a><a class="nav-btn rounded-right" href="#">Portfolio</a> 
    </div> 
    <div class="admin-header-right"> 
     <p>Hello <b>Joe Smith Brown Jones</b> | <a href='#'>account</a> | <a href='#'>settings</a> | <a href='#'>help</a> | <a href='#'>exit</a></p> 
    </div> 
    <div class='clearboth'></div> 
</div> 

Answer 1

Vous pouvez essayer avec:

display: table, table-row, table-cell

Dans ce cas, vous serez en mesure d'utiliser la propriété vertical-align:

Vous pouvez vérifier l'exemple mis à jour ici: http://jsfiddle.net/HPKTa/1/

Malheureusement, cela ne fonctionne pas dans IE6. En cas de IE6, vous pouvez positionner les boutons avec javascript.

Answer 2

Vous devez jouer un peu avec ces propriétés CSS

display:table-cell; vertical-align:middle;