how to center DIV element in CSS with HTML?

Question

I have looked through most or all of the similar questions and none of their solution worked for me. I am trying to center DIV element using CSS and no matter what I do or did nothing works for me. Just so you know, this is an example code I found online to play around with and simply trying to get it CENTERED and nothing works. text-align, margin auto, inline-block

Here is CSS code:

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

Here is the HTML code:

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

Here is a screenshot of Un-centered DIV elements:

Here is an image of WHAT I AM TRYING TO DO: I manipulated the image to show you what I am trying to do.

But if I do that browser just stacks the images on top of each to the left. — ThN, Dec 12 '19 at 15:54
Change display to `inline-block`, remove `float:left` and add `text-align: center`. That should do it. — Ahmed Aboumalek, Dec 12 '19 at 16:04

score 1 · Accepted Answer · answered Dec 12 '19 at 15:54

1

You need to:

Class .container-all: add text-align: center;;
Class .container: disable float: left; and replace display: block; with display: inline-block;.

I have created JSFiddle for you

answered Dec 12 '19 at 15:54

Alex

2,707
4
29
42

score 0 · Answer 2 · answered Dec 12 '19 at 15:57

Update as per this css.

@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;text-align: center;}

.container{width: calc(10% - 6px);overflow:hidden;height: fit-content;margin:3px;padding: 0;display: inline-block;position:relative;float: none;}

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

Whenever you add float to the div then it can't be centered except any case rather than parent having display to flex.

So first add display to inline block for every container rather than setting height to fit-content and then inline-block will be centered by applying text-center to parent as it also follows the properties of inline and block both.

how to center DIV element in CSS with HTML?

2 Answers2