Div 在 flex 容器中添加了很多上边距导致对齐问题答案

【问题标题】：Div adding a lot of top margin in flex container causing alignment issuesDiv 在 flex 容器中添加了很多上边距导致对齐问题
【发布时间】：2022-01-31 01:27:27
【问题描述】：

我正在使用 flex 在 bootstrap 5 中工作。我希望图像与其右侧的某些内容对齐，但是当我垂直对齐时，右侧的内容没有任何变化。它似乎是“鲍勃” div 中的边距，但它没有出现在检查中。添加 mt-0 也无济于事。我完全没有想法。下面是重现我的问题的代码 sn-p。

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
  <div>
I want the image on the left to align vertically with the div "bob" and "5 hrs ago". For some reason where it says "bob" there is a massive space above.
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </div>
</div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-5

【解决方案1】：

您可以为 location-time div margin-bottom: 10px; 添加边距底部。由于line-height: 1px，您遇到了这个问题。如果不加margin-bottom就取消了，也可以达到效果

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
  <div>
I want the image on the left to align vertically with the div "bob" and "5 hrs ago". For some reason where it says "bob" there is a massive space above.
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </div>
</div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

【讨论】：

成功了，谢谢。我没想到要调整底部的，因为它显示了顶部的差距。再次感谢。

【解决方案2】：

您可以尝试这样做：

html:

 <div class="bob_and_text">
     <div id="post_top">bob </div>
     <div id="post_top2" class="location-time">5 hrs ago</div>
 </div>

css:

 .profile-name{
     display: flex;
     align-items: center;
     position: relative;
 }
 .bob_and_text{
     position: absolute;
     top: -2px;
     left: 35px;
 }

【讨论】：