更新时间:2022-10-21 23:17:31
您可以尝试:
display:table,table-row,table-cell
在这种情况下,您将能够使用vertical-align属性: / p>
您可以在这里检查更新的示例: http:// jsfiddle .net / HPKTa / 1 /
不幸的是,这在IE6中不起作用。在IE6的情况下,你可以用javascript来定位按钮。
I have a div with 2 floated divs.
On the left 3 buttons and on the right links in a paragraph, single line.
When the links on the right become to long (or I decide on more bottons) the paragraph goes multiline and I would like my buttons to center vertically.
In my example the bold name "Joe Smith" works fine, but if becomes "Joe Smith Brown Jones" I need my buttons to center. 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>
You can try with:
display:table,table-row, table-cell
In this case you will be able to use vertical-align property:
You can check updated example here: http://jsfiddle.net/HPKTa/1/
Unfortunately this doesn't work in IE6. In case of IE6, you can position buttons with javascript.