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

Why I can't center the images? – Html

<div class="activities">
            <h3>Top three activities to do at Torshov</h3>
            <img class="activities-img" src="images/deniz.jpg">
            <img class="activities-img" src="images/muze.jpg">
            <img class="activities-img" src="images/bar.jpg"> 
        </div>

body {
    margin: 0;
}

.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;  
    justify-content: center;
}

I want to center the images, I have tried with "justify content", "text-align" and all but didn’t work, could you help me? Thanks.

Tags:

4

Answers


  1. 0

    Wrap the images in a container with the display property set to flex. Then you can use the justify-content property.

    <div class="activities">
  <h3>Top three activities to do at Torshov</h3>
  <div id="flex">
    <img class="activities-img" src="images/deniz.jpg">
    <img class="activities-img" src="images/muze.jpg">
    <img class="activities-img" src="images/bar.jpg"> 
  </div>
</div>

    body {
    margin: 0;
}

div#flex {
  display: flex;
  justify-content: center;
}

.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
}
    Login or Signup to reply.
  2. 0

    I think you forgot centering content in parent div .activities

    body {
    margin: 0;
}

.activities {
  width: 100%;
  background-color: lightpink;
  text-align: center;
}
.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;  
    justify-content: center;
}
    Login or Signup to reply.
  3. 0

    There are several ways to do this. It depends on whether you should do it with flexbox or without flexbox. Also, it depends on whether the html can be changed or should not be changed.

    With flexbox, changes in your html:

    .activities-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.activities-img img{
  width: 100px;
  height: 100px;
}
    <div class="activities">
  <h3>
    Top three activities to do at Torshov
  </h3>
  <div class="activities-img">
    <img src="images/deniz.jpg">
    <img src="images/muze.jpg">
    <img src="images/bar.jpg"> 
  </div>
</div>

    Without flexbox, but the same html

    .activities-img {
    display: block;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
    <div class="activities">
    <h3>Top three activities to do at Torshov</h3>
    <img class="activities-img" src="images/deniz.jpg">
    <img class="activities-img" src="images/muze.jpg">
    <img class="activities-img" src="images/bar.jpg"> 
</div>

    You could need "text-align" to center de content of the h3 tag

    Login or Signup to reply.
  4. 0

    You can simply use the center tag, no need to change the css, center tag always helps, you HTML code should be like this :-
    <div class="activities"> <h3>Top three activities to do at Torshov</h3> <center><img class="activities-img" src="images/deniz.jpg"> <img class="activities-img" src="images/muze.jpg"> <img class="activities-img" src="images/bar.jpg"></center> </div>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search