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