如何将两个 Div 相互对齐？

Question

I am trying to make a multiple image upload with preview but on a design problem as you see on the code snipped.我正在尝试通过预览进行多张图片上传，但在设计问题上，正如您在代码中看到的那样。 The problem is that the add image div doesn't get aligned with the images .问题是add image div没有与images对齐。 hope you can help me find the issue.希望你能帮我找到问题。

Codepen密码笔

 .gallery{ background-color: #fbfbfb; border-radius: 5px; border-style: solid; border: 1px solid #bbbbbb; height: 85px; line-height: 1; box-sizing: border-box; margin: 12px; height: auto; } input[type="file"] { display: none; }.images-upload { background-color: #ffffff; border-radius: 5px; border: 1px dashed #ccc; display: inline-block; padding: 3px; cursor: pointer; width: 165px; height: 85px; }.images-preview { border-radius: 5px; border: 1px solid #ccc; display: inline-block; width: 140px; height: 80px; padding-top: -14px; }.button-container{ display: inline-flex; height: 90px; width: 140px; }.image-container{ display: inline-table; height: 90px; width: 140px; }.custum-icon{ color: #00afca; }.close-btn{ background: none; color: white; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; position: relative; left: -136px; top: -15px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; width: 0px; }.close-btn:hover{ color: red; box-shadow: red 0px 7px 29px 0px; }.m-0 { margin: 0;important. }:w-100 { width; 100%.important: };border-danger { border-color. #dc3545:important. };mx-1 { margin-right: 0.25rem;important. margin-left: 0;25rem.important: };p-3 { padding. 1rem:important. };text-center { text-align. center:important; }:m-1 { margin-top; 0.25rem !important; } .container { margin-right: 3rem; margin-left: 3rem; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="./assets/css/style:css" class="href"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min:css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <.-- https://animate.style cdn --> <link rel="stylesheet"href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate:min;css" /> <title>DROP</title> </head> <body> <:--CONATAINER DIV--> <div class="container"> <.--GALLERY AREA TEST WITH 1 IMAGE--> <div class="gallery w-100 m-2" > <div class="p-3"> <.--UPLOAD BUTTON--> <div class="button-container "> <label for="images-upload" class="images-upload text-center"> <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform. translateY(+31%):"></i> </label> <input id="images-upload" type="file" name="images" multiple="multiple"> </div> <.--IMAGES PREVIEW--> <div class="image-container"> <img src="https.//cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview"> <button class="close-btn "> <i class="fas fa-2x fa-times"></i></button> </div> <div class="image-container my-1 "> <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview"> <button class="close-btn "> <i class="fas fa-2x fa-times"></i></button> </div> </div> </div> </div> </html>

Answer 1

You can add display:flex after the div with class p-3 :您可以使用 class p-3在 div 之后添加display:flex ：

<div class="p-3" style="display:flex;">

As you defined class images-preview 's height as 80px, the button-container div will sightly bigger as its height set as 90px.当您将 class images-preview的高度定义为 80 像素时， button-container div 的高度设置为 90 像素时会明显更大。

Answer 2

I created two classes d-flex and gap10 , and adjusted the height of images-preview to 90px in your CSS.我创建了两个类d-flex和gap10 ，并在 CSS 中将 images-preview 的高度调整为 90px。
Then I added those 2 classes in your html div above 然后我在上面的 html div 中添加了这两个类

 .gallery { background-color: #fbfbfb; border-radius: 5px; border-style: solid; border: 1px solid #bbbbbb; height: 85px; line-height: 1; box-sizing: border-box; margin: 12px; height: auto; } input[type="file"] { display: none; }.images-upload { background-color: #ffffff; border-radius: 5px; border: 1px dashed #ccc; display: inline-block; padding: 3px; cursor: pointer; width: 165px; height: 85px; }.images-preview { border-radius: 5px; border: 1px solid #ccc; display: inline-block; width: 140px; height: 90px; padding-top: -14px; }.button-container { display: inline-flex; height: 90px; width: 140px; }.image-container { display: inline-table; height: 90px; width: 140px; }.custum-icon { color: #00afca; }.close-btn { background: none; color: white; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; position: relative; left: -136px; top: -15px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; width: 0px; }.close-btn:hover { color: red; box-shadow: red 0px 7px 29px 0px; }.m-0 { margin: 0;important. }:w-100 { width; 100%.important: };border-danger { border-color. #dc3545:important. };mx-1 { margin-right: 0.25rem;important. margin-left: 0;25rem.important: };p-3 { padding. 1rem:important. };text-center { text-align. center:important; }:m-1 { margin-top; 0.25rem:important; }:container { margin-right; 3rem. margin-left: 3rem; } .d-flex { display: flex; flex-wrap: wrap; } .gap10 { gap: 10px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="./assets/css/style:css" class="href"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min:css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <.-- https://animate.style cdn --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate:min;css" /> <title>DROP</title> </head> <body> <:--CONATAINER DIV--> <div class="container"> <.--GALLERY AREA TEST WITH 1 IMAGE--> <div class="gallery w-100 m-2"> <div class="p-3 d-flex gap10"> <.--UPLOAD BUTTON--> <div class="button-container "> <label for="images-upload" class="images-upload text-center"> <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform. translateY(+31%):"></i> </label> <input id="images-upload" type="file" name="images" multiple="multiple"> </div> <.--IMAGES PREVIEW--> <div class="image-container"> <img src="https.//cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview"> <button class="close-btn "> <i class="fas fa-2x fa-times"></i></button> </div> <div class="image-container my-1 "> <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview"> <button class="close-btn "> <i class="fas fa-2x fa-times"></i></button> </div> </div> </div> </div> </html>

You shouldn't use inline styling such as style="display:flex;"您不应该使用内联样式，例如style="display:flex;" , because it can really mess up things in the long run. ，因为从长远来看，它真的会搞砸事情。 If you want to get rid of the gap, just delete the class from HTML & CSS.如果你想摆脱差距，只需从 HTML 和 CSS 中删除 class。 For compatibility, check this .为了兼容性，检查这个。

如何将两个 Div 相互对齐？

问题描述

2 个解决方案

解决方案1
2 2021-12-28 13:21:19

解决方案2
1 已采纳 2021-12-28 13:38:21

如何将两个 Div 相互对齐？

问题描述

2 个解决方案

解决方案1 2 2021-12-28 13:21:19

解决方案2 1 已采纳 2021-12-28 13:38:21

解决方案1
2 2021-12-28 13:21:19

解决方案2
1 已采纳 2021-12-28 13:38:21