I am currently working on implementing a multiple image upload feature with preview, but I have encountered a design issue in the code snippet provided.
The problem lies in aligning the add image div with the images.
I would appreciate any assistance in identifying and resolving this issue.
.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;
}
.custom-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 custom-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>