Question

我真的被困在试图使一个div居中并且有一个div向左浮动而一个向右浮动。最后，它应该有点像图形中的第一个标题。但是，应该位于中心的第二个元素总是像图中的第二个示例一样向左浮动。 Example-Graphic

当我将显示设置为阻止和特定宽度时，我能够将其居中。但是我希望宽度和孩子一样大，我通过将显示设置为内联块来实现，对吧？那么还有其他方法吗？

感谢您的帮助托拜厄斯

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

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

#header{
    text-align: center;
}

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

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，这会使它居中。

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="left"> Left </div> <div class="right"> Right </div> <div class="mid"> Mid </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以使用 display：flex

将内容包装在 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>

使用 flexbox

类更新 CSS

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

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

Answer 5

这是你想要的吗？

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


}

注意：更改值

float中间的CSS中心：左右内联，没有宽度

HTML

CSS

5 个答案: