У меня есть div с 2 плавающими div.
Слева 3 кнопки и справа ссылки в абзаце, одна строка.
Когда ссылки справа становятся слишком длинными (или я решаю больше кнопок ) абзац становится многострочным, и я хотел бы, чтобы мои кнопки центрировались по вертикали.
В моем примере жирное имя «Джо Смит» работает нормально, но если оно становится «Джо Смит Браун Джонс», мне нужно, чтобы мои кнопки были в центре. см. пример здесь
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>