I have exhausted all similar questions and solutions, but nothing seems to work for me. My goal is to center a DIV element using CSS, and I've tried options like text-align, margin auto, and inline-block with no success. The example code I am experimenting with online simply refuses to be CENTERED.
Below is the CSS code I am working with:
@import url('https://fonts.googleapis.com/css?family=Poppins');
body, html{
margin: 0;
background: #ffffff;
font-family: 'Poppins', sans-serif;
}
h1{
text-align: center;
color:white;
}
.container-all{
width: fit-content;
margin: 20px auto;
height: auto;
}
.container{
width: calc(10% - 6px);
overflow:hidden;
height: fit-content;
margin:3px;
padding: 0;
display: block;
position:relative;
float:left;
}
img{
width: 100%;
transition-duration: .3s;
max-width: 100%;
display:block;
overflow:hidden;
cursor:pointer;
}
.title{
position:absolute;
display:block;
cursor:pointer;
top: 35%;
display: none;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 1.6em;
text-shadow: 1px 5px 10px black;
transition-duration: .3s;
}
.text{
position:absolute;
top: 70%;
cursor:pointer;
max-width: 80%;
text-align:center;
left: 50%;
text-shadow: 1px 5px 10px black;
font-size: 1em;
display:none;
margin-right: -50%;
transition-duration: .3s;
transform: translate(-50%, -50%)
}
.container:hover img{
transform: scale(1.2);
transition-duration: .3s;
filter: grayscale(50%);
opacity: .7;
}
.container:hover span{
color:white;
display: block;
transition-duration: .3s;
}
@media only screen and (max-width: 900px) {
.container {
width: calc(50% - 6px);
}
}
@media only screen and (max-width: 400px) {
.container {
width: 100%;
}
}
This is how my HTML looks:
<!DOCTYPE HTML>
<html>
<head>
<title>Gallery Testing</title>
<link rel="stylesheet" type="text/css" href="gallery-test.css" />
</head>
<body>
<div class="container-all">
<div class="container">
<img src="https://images.freeimages.com/images/small-previews/d5d/powerlines-5-1389930.jpg" alt="">
<span class="title">Lorem ipsum dolor</span>
<span class="text">Morbi diam viverra mattis sociis magna, habitasse penatibus non lectus</span>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/small-previews/d5d/powerlines-5-1389930.jpg" alt="">
<span class="title">Lorem ipsum dolor</span>
<span class="text">Morbi diam viverra mattis sociis magna, habitasse penatibus non lectus</span>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/small-previews/d5d/powerlines-5-1389930.jpg" alt="">
<span class="title">Lorem ipsum dolor</span>
<span class="text">Morbi diam viverra mattis sociis magna, habitasse penatibus non lectus</span>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/small-previews/d5d/powerlines-5-1389930.jpg" alt="">
<span class="title">Lorem ipsum dolor</span>
<span class="text">Morbi diam viverra mattis sociis magna, habitasse penatibus non lectus</span>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/small-previews/d5d/powerlines-5-1389930.jpg" alt="">
<span class="title">Lorem ipsum dolor</span>
<span class="text">Morbi diam viverra mattis sociis magna, habitasse penatibus non lectus</span>
</div>
</div>
</body>
</html>
This shows the uncentered result: https://i.sstatic.net/Bx8xD.png
Here's an image illustrating what I'm aiming for: I edited the image to demonstrate my desired outcome. https://i.sstatic.net/ReaRX.png