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 Allan Paul de Luna
Allan Paul de Luna
Courses Plus Student 711 Points

text alignment ignored using display inline element?

how do i align the text of the header if i used a display inline element?

Nikhil Rai
Nikhil Rai
15,391 Points

Can you post your example ?? What are you trying to do?

1 Answer

Allan Paul de Luna
PLUS
Allan Paul de Luna
Courses Plus Student 711 Points
Allan Paul de Luna
Allan Paul de Luna
Courses Plus Student 711 Points

Nikhil, I'm trying to position the "My Logo" in the far right of the page. Here's the html:

<div class="main-wrapper"> <header class="main-header"> <h2 class="main-logo"><a href="#">My Logo</a> </h2> </header> </div>

here's the css:

.main-wrapper { width: 100%; margin: auto; }

body { margin: 0; }

.main-header { padding: 15px 0px 15px 25px; }

h2 { display: inline; font-family: Garamond, sans-serif; font-weight: bold; text-shadow: 1px 1px 3px #666666; }

This is the header of the page. Using the display inline, it won't align the text in right position. I used float: right and text-align: right but it didn't do anything. Can we use other properties?

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Using float: right on the h2 works for me: View CodePen

Alternatively, you could assign text-align: right to .main-header or use position: absolute; right: 0; on the h2 instead.