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 Robert Doyle
Robert Doyle
4,737 Points

How do you centre a logo or image within a header?

After finishing the HTML basics course I want to try and build the finished HTML with the CSS that is not shown in the course for the VR site. There was an example shown where an image with a border-radius 50% is centred in the header vertically and horizontally. How should I do this in a responsive way. Plus how do we achieve a slanted header. Thanks.

2 Answers

Jack Cummins
Jack Cummins
17,417 Points
Jack Cummins
Jack Cummins
17,417 Points

you center a logo or image within a header by if text:

text-align:center;

Or if it's not text:

align:center;
Hayden Hoodless
Hayden Hoodless
4,138 Points
Hayden Hoodless
Hayden Hoodless
4,138 Points

You can center an image by first setting the images width to take up 50% of the parent elements width. To do this, make sure you assign your image a class in your html by using the class attribute in your img html tag.

<img class="img-class-name" src="img.jpg" alt="alternative text for image">

Then, in your stylesheet, or style section :

.img-class-name {
         width:50%;
}

Then set your image class margins to 25%, so that the browser will display the image is half the width of the parent element, and allows for equal spacing from the image to the parent element's left and right sides. 

.img-class-name {
     width:50%;
     margin-left:25%;
     margin-right:25%;
}

You can have a different width value, but remember the parent element's content space is 100% wide relative to our image, so if you have an image width of 80%, then your margin left and right values would be (100-80)/2=10, 10%. Bare in mind your image will space itself to the parent elements content area, that is, padding applied to the parent element is added and can offset your image. Some times, simply fiddling with margins and paddings can help you understand what you need to do to get the desired effect.