Div在flex容器中添加了很多頂部邊距導致對齊問題-有解無憂

我正在使用 flex 在 bootstrap 5 中作業。我希望影像與其右側的某些內容對齊，但是當我垂直對齊時，右側的內容沒有任何變化。它似乎是“鮑勃” div 中的邊距，但它沒有出現在檢查中。添加 mt-0 也無濟于事。我完全沒有想法。下面是重現我的問題的代碼片段。

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

uj5u.com熱心網友回復：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

uj5u.com熱心網友回復：

您可以嘗試這樣做：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429650.html

標籤：html css 推特引导弹性盒引导程序 5

上一篇：在DoubleClick事件上使用原生JavaScript打開自定義引導模式

下一篇：在Bootstrap5中的列之間添加排水溝