CSS center between float: left and right inline without width

Question

我真的很难尝试将 div 居中，让 div 向左浮动，一个向右浮动。最后它应该有点像图中的第一个 header。然而，第二个元素，应该在中心，总是像图中的第二个例子那样向左浮动。 Example-Graphic

当我设置要阻止的显示和特定宽度时，我已经能够将它居中。但是我希望宽度与 children 一样大，这是通过将显示设置为 inline-block 来实现的，对吗？那么有没有其他方法可以做到这一点？

感谢您的帮助托拜厄斯

HTML

<section id="header">
  <div class="content_box logo">
    TippMe-Logo
  </div>
  <div class="content_box user_management">
    <div class="user_icon">

    </div>
    <div class="user_name">
      <%= link_to "USER", "#" %>
    </div>
    <div class="user_logout">
      <%= link_to "(Logout)", "#" %>
    </div>
  </div>

  <div class="content_box navbar">
    <nav>
      <%= link_to "TIPPEN", "#" %>
      <%= link_to "HIGHSCORE", "#" %>
      <%= link_to "TABELLE", "#" %>
    </nav>
  </div>
</section>

CSS

// - - - - - VARIABLES - - - - - //

$background: #777777;
$main: #00143A;

// - - - - - GLOBAL STYLING - - - - - //

body{
  background-color: $background;
}

a{
  text-decoration: none;
}

#main_wrapper{
  width: 1440px;
  max-width: 90%;
  margin: 3rem auto 0 auto;
}

.content_box{
  border-radius: 0.6em;
}

// - - - - - HEADER STYLING - - - - - //
#header{
  .content_box{
    background-color: $main;
    padding: 0.2rem 0.5rem;
    display: inline-block;

  }

  .logo{
    float: left;
    color: white;
  }

  .user_management{
    float: right;
  }

  .navbar{
    margin: 0 auto;
    a{
      float: left;
      padding: 0 10px;
    }
  }

  a{
    color: white;
  }
}

Answer 1

这就是你想要的吗？

img {
max-width: 470px;
width: 100%;
height: auto;
display: block;
margin: 70px auto;


}

注意：更改值

Answer 2

通过创建新的 html 和 css 文件试试这个。几乎没有更改，您使用的是 .user_management 而不是 .user_name。增加您的 .logo 宽度以在中心对齐 .nav 和 .nav 宽度以在右角对齐 .user_name。您甚至可以使用填充由您决定。

<section id="header">
  <div class="content_box logo">
TippMe-Logo
  </div>
  <div class="content_box user_management">
<div class="user_icon">
</div>
 <div class="content_box navbar">
<nav>
  <a href="#"> TIPPEN </a>
  <a href="#"> HIGHSCORE </a>
  <a href="#"> TABELLE </a>
</nav>
</div>
 <div class="user_name">
<a href="#"> USER </a>
</div>
<div class="user_logout">
  <a href="#"> (Logout) </a>
</div>
  </div>
</section>

已更新CSS

body {
background-color: #777777;
}
a {
  text-decoration: none;
}
.content_box {
  border-radius: 0.6em;
}
#header .content_box {
  background-color: #00143A;
  padding: 0.2rem 0.5rem;
}
#header .logo {
  float: left;
  color: white;
}
#header .user_name {
  float: left;
}
#header .navbar {
  margin: 0;
  padding:0;
  display:inline;
  float:left;
  width:300px;
}
#header .navbar a {
  padding: 0 10px;
}
#header a {
  color: white;
}
#header{
 width:100%;
 height:200px;
}

Answer 3

重要的部分是 居中的 div 在之后左右 div 在标记。看看这个例子，它在居中的 div 上使用 margin-left: auto 和 margin-right: auto，这导致它居中。

.left {
    float: left;
    border: solid 1px blue;
}

.mid {
    margin-left: auto;
    margin-right: auto;
    border: solid 1px blue;
    text-align: center;
}

.right {
    float: right;
    border: solid 1px blue;
}

<div class="left"> Left </div>
<div class="right"> Right </div>
<div class="mid"> Mid </div>

Answer 4

您的代码是正确的。只需添加一个 css 行。

#header{
    text-align: center;
}

演示 - https://jsfiddle.net/dhananjaymane11/thwsegs8/1/

Answer 5

您可以使用 display:flex

用 class 将 content_box 包裹在 div 中弹性盒子

 <div class="flexBox">
    <div class="content_box navbar">
      <nav>
        <a href="#"> TIPPEN </a>
        <a href="#"> HIGHSCORE </a>
        <a href="#"> TABELLE </a>
      </nav>
    </div>
 </div>

使用 class flexbox

更新您的 CSS

.flexBox{
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
}

https://jsfiddle.net/thwsegs8/2/

CSS center between float: left and right inline without width

CSS center between float: left and right inline without width

html

css

erb

HTML

CSS