CSS中心垂直在2个漂浮的div [英] CSS center vertically in 2 floated divs

问题描述

我有一个带有2个浮动div的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％; 
} 
 
 / *按钮* / 
 a.nav-btn，a.nav-btn：link，a.nav-btn：visited，a.nav-btn： focus {padding：5px 15px; margin-right：2px; text-decoration：none;颜色：白色; 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-lefthref =＃>新订单< / a>< a class =nav-btnhref =＃& a>< a class =nav-btn rounded-righthref =＃> Portfolio< / a> 
< / div> 
< div class =admin-header-right> 
< p>您好< b>乔·布朗琼斯< / b> | < a href ='＃'>帐户< / a> | < a href ='＃'> settings< / a> | < a href ='＃'> help< / a> | < a href ='＃'>退出< / a>< / p> 
< / div> 
< div class ='clearboth'>< / div> 
< / div> 
  

解决方案

您可以尝试：

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.

这篇关于CSS中心垂直在2个漂浮的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！