Question

好吧，我回到做前端的事情 - 这真的不是我的强项 - 而且我很难过。

我有一个带徽标的div，我需要在其中放置一些文本，在div中垂直居中。每当我尝试将元素向右浮动时，它似乎最终都在div之外（不知何故？）。

相关CSS：

   #wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#wrapper-header #header-logo {
  margin-left: 20px;
  padding: 10px 0;
}

#wrapper-header #header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#wrapper-header #header-customer-name {
  vertical-align: middle;
}

我需要做些什么才能让这个header-customer-name元素正确浮动？

Answer 1

您可以尝试使用弹性框：

＆＃13;

html, body{
    margin: 0;
    padding: 0;
}

#wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#header-logo {
  margin-left: 20px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#header-customer-name {
  flex-grow: 1;
    text-align: right;
}

＆＃13;

 <div id="wrapper-header">
  <div id="wrapper-nav-header">
    <div id="header-logo">
      <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span>
      <span id="header-customer-name">Customer Name</span>
    </div>
  </div>
</div>

＆＃13;

或者您可以像这样计算header-customer-name的适当填充：

＆＃13;

html, body{
    margin: 0;
    padding: 0;
} 
#wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#header-logo {
  margin-left: 20px;
  padding: 10px 0;
}

#header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#header-customer-name {
  float: right;
    padding: 12px 0; /*you can change for a more precise value*/
}

＆＃13;

 <div id="wrapper-header">
  <div id="wrapper-nav-header">
    <div id="header-logo">
      <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span>
      <span id="header-customer-name">Customer Name</span>
    </div>
  </div>
</div>

＆＃13;

无论如何，如果您提到header-customer-name正在#wrapper-header的右侧，那可能是因为它有position: fixed和width: 100%，那么＆＃ 39;为什么我添加风格：

html, body{
    margin: 0;
    padding: 0;
}

在此处查看我的答案，以便更好地理解White Space Appears Right of Browser Window When at Full Screen

这与问题无关，但可以帮助你

不要资格过高

作为一般规则，请勿提供超出必要的信息。

// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}

// good
#someid {..}
#otherid {..}
#id2{...}

Answer 2

Try in fiddle

以这种方式改变风格..

#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px;  /*value suits to your logo */
}

Answer 3

您是否在与此页面链接的CSS文件中有CSS重置代码。在低于css重置添加后，问题解决了。的 Demo

html, body { margin:0; padding:0; }

div右边的浮动元素出现在外面

3 个答案: