Image is not centered even margin auto applied

Question

Trying to move the picture to the centre of the page using CSS. I applied these values to the image, but no success. See code below:

HTML:

<div class="list_of_reviews">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
</div>
<img class="image_1" src="for left column.jpg" alt="What will happen to Brittish travelers when Brexit finaly happens"/>

CSS:

.list_of_reviews {
    margin:80px auto;
    font-family: "Times New Roman", Times, Serif;
    line-height: 1.5;
    font-size: 30px;
    width: 40%;     
    border:solid;
}


.image_1 {
    margin:auto;
    height:200px;
    width:350px;
    position:relative;
}

Would really appreciate straight to the point answer and no downgrading please.

Ricky Ruiz · Accepted Answer · 2016-08-22T23:06:52.810

For margin: 0 auto to work you need to add display: block.

.list_of_reviews {
  margin: 80px auto;
  font-family: "Times New Roman", Times, Serif;
  line-height: 1.5;
  font-size: 30px;
  width: 40%;
  border: solid;
}
.image_1 {
  display: block;
  margin: auto;
  height: 200px;
  width: 350px;
  position: relative;
}

<div class="list_of_reviews">
  <ul style="list-style-type:none">
    <li>What will happen to Brittish travelers when Brexit finaly happens</li>
  </ul>
</div>
<img class="image_1" src="http://placehold.it/350x200" alt="What will happen to Brittish travelers when Brexit finaly happens" />

EDIT:

Actually...

Don't change the default behavior of an element if you can avoid it. Keep elements in the natural document flow as much as you can.

Since images behave like text by default, it is better if you do this:

.list_of_reviews {
  margin: 80px auto;
  font-family: "Times New Roman", Times, Serif;
  line-height: 1.5;
  font-size: 30px;
  width: 40%;
  border: solid;
}
figure {
  text-align: center;
}
.image_1 {
  height: 200px;
  width: 350px;
  position: relative;
}

<div class="list_of_reviews">
  <ul style="list-style-type:none">
    <li>What will happen to Brittish travelers when Brexit finaly happens</li>
  </ul>
</div>
<figure>
  <img class="image_1" src="for left column.jpg" alt="What will happen to Brittish travelers when Brexit finaly happens" />
</figure>

score 2 · Answer 2 · edited May 23 '17 at 12:33

2

By default <img> are set to display: inline; (although they technically have certain display: inline-block; properties - https://stackoverflow.com/a/2402773/3997209.

You can override that to display: block; quite easily and your required layout will work: https://jsfiddle.net/er13qobj/

edited May 23 '17 at 12:33

Community

1
1

answered Aug 22 '16 at 22:05

Andi North

907
5
12

score 0 · Answer 3 · answered Aug 22 '16 at 22:14

Instead I would recommend this way however it finds silly but still it works,

<div class="list_of_reviews">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
</div>
<center>
<img src="for left column.jpg" alt="What will happen to Brittish travelers when Brexit finaly happens"/>
</center>

Image is not centered even margin auto applied

3 Answers3