Css 两个div的对齐错误_Css_Html_Alignment

Css 两个div的对齐错误

css html

Css 两个div的对齐错误,css,html,alignment,Css,Html,Alignment,我的HTML/CSS代码有问题。我有两个div（你可以在照片中看到）。我想像第二张照片中显示的那样对齐它们。我的HTML代码是： <!DOCTYPE html> <html> <head> <title>---</title> <link rel="stylesheet" type="text/css" href="assets/style.css"> <script src="https://

我的HTML/CSS代码有问题。我有两个div（你可以在照片中看到）。我想像第二张照片中显示的那样对齐它们。我的HTML代码是：

<!DOCTYPE html>
<html>
<head>
    <title>---</title>
    <link rel="stylesheet" type="text/css" href="assets/style.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="assets/js/animatii.js"></script>

</head>

<body>

    <div class="menu">
        <div class="menu_active_zone">
            <h1>Title</h1>
            <button class="buton_login">AUTENTIFICARE / INREGISTRARE</button>
            <br>
            <div class="box_fl">fdsdsfd</div>
            </div>
    </div>



</body>
</html>

.menu{
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0px 0.5px 5px 0.5px #888;
    z-index: 2;
    position: absolute;
    display: none;
}

.menu h1{
    position: absolute;
    font-size: 40px;
    color: #888;
    font-family: "Roboto Thin";
    margin-top: 20px;
    font-weight: lighter;
}

.menu_active_zone{
    width: 1200px;
    height: 80px;
    background: #fff;
    top:0;
    left:0;
    margin: 0 auto;
}
.box_fl{
    height: auto;
    background: #fff;
    box-shadow: 0px 0.5px 5px 0.5px #888;
    display: none;
    position: absolute; 
    right: 0; 
    bottom: 0;


}

.buton_login{
    background: #fff;
    height: 30px;
    box-shadow: 0px 0.5px 5px 0.5px #888;
    border: 0px;
    font-family: "Roboto";
    font-size: 16px;
    color: #888;
    float: right; 
    position: relative; 
    padding-bottom: 1em;
}

我尝试了您提供的信息。如果我明白了，您希望将两个div垂直居中对齐。如果这是你想要的。这就是我的目的。首先，HTML代码：

<body>
   <div class="menu">
    <div class="menu_active_zone">
      <h1>Title</h1> 
        <div id="login">
          <button class="buton_login">AUTENTIFICARE / INREGISTRARE</button>
          <div class="box_fl">fdsdsfd</div>
        </div>
    </div>
  </div>
</body>

仅说明使用Flexbox进行中心和垂直对齐的机制。它将HTML元素垂直或水平显示为块

显示：flex指示使用Flexbox（默认情况下，它显示一行中的元素）
弹性方向：列，行指示如何显示元素
对齐内容：居中表示将元素置于第一个轴的中心
对齐项目：居中表示元素在第二轴上居中

希望您能将其集成到您的代码中，这正是您需要的

祝你好运

发布该区域的其他html/css，以便我们了解您当前正在处理的内容。您必须将顶部和左侧添加到位置这对我不起作用。我对第二个div有相同的结果。只是第一个被移动到菜单栏的底部。

<body>
   <div class="menu">
    <div class="menu_active_zone">
      <h1>Title</h1> 
        <div id="login">
          <button class="buton_login">AUTENTIFICARE / INREGISTRARE</button>
          <div class="box_fl">fdsdsfd</div>
        </div>
    </div>
  </div>
</body>

  .menu
  {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #login
  {
    display: flex;
    flex-direction: column;
    align-items: center;
  }