Question

我的HTML / CSS代码有问题。我有2个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>

我的CSS代码是：

.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;
}

Answer 1

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; 
top:50px;
left:170px;
padding-bottom: 1em;
}

Answer 2

我尝试了您提供的信息。如果我理解，你想要居中并垂直对齐2个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>

我添加了另一个ID为#login的div。此div允许您垂直对齐div。然后，CSS代码：

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

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

显示：flex表示使用Flexbox（默认显示连续显示元素）
flex-direction ：列，行表示如何显示元素
justify-content ：center表示第一轴上的中心元素
align-items ：center表示第二轴上的中心元素

希望您可以将其集成到您的代码上，这就是您所寻找的。祝你好运！

两个div错误对齐

2 个答案: