Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Arturo Espinoza
Arturo Espinoza
9,181 Points

Center images

Im creating my first site and its looking good, for something with little coding. My issue is the images will center (as I set it up) but there is a big space on the right side. Also when you make the page smaller they align left. Im sure its a simple fix I just cant see it. Can someone please help. /******************************** Body *********************************/

body { background: #F4733D; }

/******************************** Heading *********************************/ h1 { text-align:center; }

/******************************** Body:Img *********************************/

img { margin: 0 auto; width:300px; height:325px; display:inline-block; background:steelblue; border-radius:15px; cursor:pointer; -webkit-duration: .3s; -moz-duration: .3s; -o-duration: .3s; transition-duration:.3s; }

img:hover { background:lightcoral; border-radius:50%; }

3 Answers

Hugo Paz
Hugo Paz
15,622 Points 
<body>
        <h1>Some text</h1>


        <div>
            <img src="logo.png">
            <img src="logo.png">
            <img src="logo.png">
            <img src="logo.png">
        </div>
    </body>

body { background: #F4733D; }
h1 { text-align:center; }
div{
    margin:0 auto;
    width:1220px;
}
img { 
      width:300px; 
      height:325px; 
      background:steelblue; 
      border-radius:15px; 
      cursor:pointer; 
      -webkit-duration: .3s; 
      -moz-duration: .3s; 
      -o-duration: .3s; 
      transition-duration:.3s; }

img:hover { background:lightcoral; border-radius:50%; }

Can you try this and see if it works? Remember to change the image src to yours.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Can you please tell us how you want the images to be displayed? If you use display:block; in your code, the images will all be centered but one on top of the other.

If you want more than one image horizontally, my advice is to put them all inside a div, give that div a width and then just give the div a margin:0 auto;

Arturo Espinoza
Arturo Espinoza
9,181 Points
Arturo Espinoza
Arturo Espinoza
9,181 Points

You are a genius! It centered perfectly! The only thing I need now is to fix so it adjust to different screen sizes. Thank a million.