Question 270036 in Html Question posted in
Some basic documentation can be found here.

Html – How do i center an image within it's parent element in CSS?

I got a task where i need to center an img element within it’s parent element through CSS. please help how.question

I tried to use the align content property but it didn’t work at all.

I searched online and they said to make the parent element’s text-align to center but that didn’t work too. I am asking this question to solve a question at freecodecamp.org

Tags:

4

Answers


  1. 0 
    .parent {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  /* Add additional styles if needed */
  height: 400px;
}

/* Optional styles for the image */
.parent img {
  max-width: 100%; /* Ensure the image doesn't exceed its parent's width */
  height: auto;    /* Maintain the image's aspect ratio */
}
    <div class="parent">
  <img src="your-image.jpg" alt="Your Image">
</div>
    Login or Signup to reply.
  2. 0

    You can use Flexbox and use property align-items in the center.

    align item property

    Check the flexbox guide – https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  3. 0

    v1.

    .parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* adjust width */
  height: 100vh; /* adjust height */
}

.parent img {
  width: 100px; /* adjust width */
  height: 100px; /* adjust height */
}
    <div class="parent">
  <img src="https://tse4.mm.bing.net/th?id=OIP.dKsCms0C9qktPUSrneMyRwHaHa&pid=Api" alt="image" id="image">
</div>

    v2. (only vertical)

    .parent {
  width: 100%; /* adjust width */
  height: 100vh; /* adjust height */
  display: flex;
}

.parent #image {
  width: 100px;
  height: 100px;
  align-self: center;
}
    <div class="parent">
  <img src="https://tse4.mm.bing.net/th?id=OIP.dKsCms0C9qktPUSrneMyRwHaHa&pid=Api" alt="image" id="image">
</div>

    v3 (use <center> tag)

    .parent {
  width: 100%;
  height: 100vh;
}

.parent img {
  width: 100px;
  
}
    <div class="parent">
  <center>
    <img src="https://tse4.mm.bing.net/th?id=OIP.dKsCms0C9qktPUSrneMyRwHaHa&pid=Api" alt="image" id="image">
  </center>
</div>

    I also recommend checking these MDN docs, there’s much information about CSS and good examples.

    Login or Signup to reply.
  4. 0

    If you have single image, use the margin property.

    .parent{
  width:70%;
  color: #ddd;
  background-color: #444;
  text-align:center;
 }
 .parent .img-center{
  margin-left:auto;
  margin-right:auto;
  max-width:50%;
  height:auto;
  display:block;
 }
    <div class="parent">
  <img class="img-center" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.P-O-mypvtwiZ2bObQdirJAHaC_%26pid%3DApi&f=1&ipt=c761ae1e184b9ffa692de86b916035f258a5f11679f1eeeb18d94725abc8c0b7&ipo=images"/><br>
  The image is from external source. <br>You can use your image in src="".
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search