How to center images in div?

Question

How to make these images stay in center? Here are my css and html codes.

My html code:

<div id="logos">
  <div id="q">
    <img id="round" src="img/i1.jpg" />
    <img id="round" src="img/i1.jpg" />
    <img id="round" src="img/i1.jpg" />
  </div>
</div>

My css code:

#logos {
display: inline-block;
width:100%;
}

#q{
 display: block;

 }
 #round {
 border-radius: 50%;
 display: inline;
 margin: 0 5px;
 width: 150; 
 height: 150; 
 position: cetner;
}

possible duplicate of [CSS - HTML: center Image in Div](http://stackoverflow.com/questions/9980531/css-html-center-image-in-div) — Andy Hoffner, Jun 04 '15 at 22:53
quick note: `id` should be unique per element. To use same identifier for more elements use `class`. — Marcin Orlowski, Jun 23 '17 at 09:35

score 1 · Answer 1 · answered Feb 12 '16 at 03:25

1

#image{
    text-align:center;
}

#image img{
    margin:0 auto;
}

<div class="image">
    <img src="path_to_your_image" alt="">
</div>

answered Feb 12 '16 at 03:25

Dante Cervantes

323
1
3
14

score 0 · Answer 2 · answered Jun 04 '15 at 21:50

0

Add to #round css:

position: relative;
display: block;
margin: auto;
width: 150px; /*units are needed */
height: 150px; /*units are needed */

answered Jun 04 '15 at 21:50

Daniel Cardoso

478
3
14

score 0 · Accepted Answer · answered Jun 04 '15 at 21:50

Use text-align: center on the parent...

#q{
    display: block;
    text-align: center;
 }

.round {
    border-radius: 50%;
    display: inline;
    margin: 0 5px;
    width: 150px; 
    height: 150px; 
}

<div id="logos">
    <div id="q">
        <img class="round" src="http://placehold.it/150x150" />
        <img class="round" src="http://placehold.it/150x150" />
        <img class="round" src="http://placehold.it/150x150" />
    </div>
</div>

Also, ID's must be unique. rounded should be a class not an ID.

Secondly, position: center; doesn't exist in CSS.

And finally, width: 150 and height: 150 must have a unit of measurement (probably px) though this will have no effect because the elements are inline - perhaps you meant inline-block?

Can you help me and explain how to add text bellow to each image? — Soiks, Jun 04 '15 at 22:16

score 0 · Answer 4 · answered Jun 04 '15 at 22:42

The Code

<div class="flex-align">
  <img class="round" src="http://placehold.it/150x150" />
  <img class="round" src="http://placehold.it/150x150" />
  <img class="round" src="http://placehold.it/150x150" />
</div>

The CSS

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}

How to center images in div?

4 Answers4