Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Understanding Values and Units Text Styles

problem with class styling

https://teamtreehouse.com/library/text-styles

 <header id="top" class="main-header">
      <span class="title">Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>

i have a problem when i target the class title to center align the text it doesnt work ,however when i selcet the containing class "main-header" it works

any help please ?? thanls in advance :)

2 Answers

Sam Gord
Sam Gord
14,060 Points

let me lead you to understand inline element by explaining a little about block element! :D according to MDN : " By default, block-level elements begin on new lines, but inline elements can start anywhere in a line. " so. a

<div></div>

is a block level element , means that if you have for example 5 divs one after the other (div is a block level element) , when u load the page u can see they are all in separate lines , on top of each other, because normally a block level element takes up full width of the page. check this example too see that

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

so what is an inline? " inline elements can start anywhere in a line. without starting a new line" for example if u have 4

<span><span>

elements , they sit next to each other. they don't start a new line. here's an example for that too

<span>1</span><span>2</span><span>3</span><span>4</span>

happy coding ;)

p.s: sometimes when i'm in doubt about how much space an element has taken i add a temporary border to it , so i can see if there is a "center" position available to that element or not :D for example

div{
 border: 1px solid red;
}

finally i got you thanks a lot sam :)

Sam Gord
Sam Gord
14,060 Points

Hi, that's because <span></span> is an inline element and the width of it is equal to its content. if u want to center the text inside the span element u should give it a display of block. like this:

.title{
   display: block;
   text-align: center;
}

happy coding ;)

mmm what is the meaning of an inline element ??