Image not getting centered

Question

I'm attempting to center an image above a div container. below is my HTML code.

 <div class="main-container">  
        <img class="ipl-img" src="assets/img/Indian_Premier_League_Official_Logo.svg.png">
    <div class="center">
        
    </div>
</div>

Here is the css

.center {
margin-top: 20px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 90%;
padding: 10px;
height: 400px;
border-radius: 25px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
background-color: rgb(255, 255, 255);
}

.ipl-img {
padding-right: 30px;
padding-top: 90px;
margin: auto;
width: 50%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}

Even though i have used margin auto i cannot seem to get the image centered. How can i get it centred?

score 1 · Accepted Answer · edited Dec 17 '22 at 16:54

add top bottom right left to 0 and margin: auto; to center an absolute element;

here the result:

.center {
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  padding: 10px;
  height: 400px;
  border-radius: 25px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background-color: rgb(255, 255, 255);
}

.ipl-img {
  width: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

 <div class="main-container">  
   <div class="center">
        <img class="ipl-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK2nG24AYDm6FOEC7jIfgubO96GbRso2Xshu1f8abSYQ&s"></img>
    </div>
</div>

Black Pearl · Answer 2 · 2022-12-17T16:42:26.820

0

This should work:

HTML:

<div class="main-container">  
  <div class="center">
    <img class="ipl-img" src="assets/img/Indian_Premier_League_Official_Logo.svg.png">
  </div>
</div>

CSS:

.center {

  display: flex;
  justify-content: center;
  align-items: center;

}

edited Dec 17 '22 at 16:42

answered Dec 17 '22 at 16:39

Black Pearl

1
3

This works. But for what i'm trying to do further, this method kind of complicate things. Thanks – CodeGirl Dec 17 '22 at 17:08

Thejan Vishmitha · Answer 3 · 2022-12-17T17:08:44.603

0

You could simply use the tag, right? It works when I use it.

<div class="main-container"> 
<center><img class="ipl-img" src="uploads/123.png"> </center>
    <div class="center">
    </div>
</div>

If you're using this code it will not working with your css code for class 'ipl-img'.

if you cann't run this then try this,

<div class="main-container"> 
<img class="ipl-img" src="uploads/123.png">
    <div class="center">
    </div>
</div>

and css code for 'ipl-img' class

.ipl-img {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

edited Dec 17 '22 at 17:08

answered Dec 17 '22 at 16:54

Thejan Vishmitha

1
2

The tag is no longer valid in HTML5. – Nora Söderlund Dec 17 '22 at 16:55

score 0 · Answer 4 · answered Dec 17 '22 at 16:58

with your code this is probably the easiest way to get what you want. Never use absolute positioning unless you absolutely have to. Just text-align:center on your top div and get rid of the abs

.center {
margin-top: 20px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 90%;
padding: 10px;
height: 400px;
border-radius: 25px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
background-color: green;

}

.ipl-img {
padding-right: 30px;
padding-top: 90px;
margin: auto;
width: 50%;

z-index: 1;
}
.main-container{
text-align:center;}

<div class="main-container">  
        <img class="ipl-img" src="https://via.placeholder.com/300">
    <div class="center">
        
    </div>
</div>

Image not getting centered

4 Answers4