Div 在 flex 容器中添加了很多顶部边距，导致 alignment 问题

Question

I am working in bootstrap 5 with flex.我正在使用 flex 在 bootstrap 5 中工作。 I want an image to align with some content to the right of it, but when I align vertically nothing happens to the content on the right.我希望图像与其右侧的某些内容对齐，但是当我垂直对齐时，右侧的内容没有任何变化。 It appears to be margin in the "bob" div, but it does not show up in the inspect.它似乎是“鲍勃” div 中的边距，但它没有出现在检查中。 Adding mt-0 doesn't help either.添加 mt-0 也无济于事。 I am all out of ideas.我完全没有想法。 Below is a code snippet that reproduces my problem.下面是重现我的问题的代码片段。

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

Answer 1

You can try doing this:您可以尝试这样做：

html: 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: css：

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

Answer 2

You can add margin bottom for location-time div margin-bottom: 10px;您可以为location-time div 添加边距底部margin-bottom: 10px; . . You are having this issue because of line-height: 1px .由于line-height: 1px ，您遇到了这个问题。 If you cancel this without adding margin-bottom , you can achieve a result too如果您取消此操作而不添加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>

Div 在 flex 容器中添加了很多顶部边距，导致 alignment 问题

问题描述

2 个解决方案

解决方案1
0 2022-01-30 17:23:32

解决方案2
0 2022-01-30 17:27:27

Div 在 flex 容器中添加了很多顶部边距，导致 alignment 问题

问题描述

2 个解决方案

解决方案1 0 2022-01-30 17:23:32

解决方案2 0 2022-01-30 17:27:27

解决方案1
0 2022-01-30 17:23:32

解决方案2
0 2022-01-30 17:27:27