How to center images in div


Tags: html,css,center,centering

Problem :

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


Solution :

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?


    CSS Howto..

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    how to affect an element's width by one child element but not others using CSS

    How to create an image that changes state?

    Position relative, how to get rid of dead space?

    how to set div display property block when url have some id?

    How to have this horizontal CSS based navigation menu work properly?

    How to change CSS portrait to landscape in iphone?

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to position a div so that it always appear 100px from top of the visible display

    How to make input[type=text] to fill remaining horizontal space?

    How to fix an image compared with another one in CSS?

    How do I position images left and right in wordpress post

    How to make text in transparent div opaque? [duplicate]

    how to show images with it's original smoothness in IE

    how to change a css class style through javascript?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How to remove a CSS class from a Wicket component?

    How to set all CSS values to their default? [duplicate]

    How can I place html text on top of a canvas flot chart?

    How to change elements display order in CSS?

    How to add Video from project directory in the background of Div

    How do you center align inline elements inside an html div?

    How to make an image fully flexible in terms of display size?

    CSS Specificity - How does “it” decide which styles to apply?

    CSS how to deal with a lot of sprite without having to create a new css class

    HTML/CSS - How can I change the spacing or add whitespace so the boxes are equal?

    How to apply custom css class to extjs grid column, and remove it with delay?

    How to make two-coloured stripe using CSS?

    CSS selectors - how to select 'for' in CSS?