How to center images in div? - html

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;
}

Answer 1

#image{
text-align:center;
}
#image img{
margin:0 auto;
}
<div class="image">
<img src="path_to_your_image" alt="">
</div>

Answer 2

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?

Answer 3

Add to #round css:
position: relative;
display: block;
margin: auto;
width: 150px; /*units are needed */
height: 150px; /*units are needed */

Answer 4

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;
}