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 CSS Basics (2014) Understanding Values and Units Text Styles

Posted by Mahmoud Nasser
Mahmoud Nasser
5,507 Points

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,084 Points
Sam Gord
Sam Gord
14,084 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;
}
Mahmoud Nasser
Mahmoud Nasser
5,507 Points

finally i got you thanks a lot sam :)

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 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 ;)

Mahmoud Nasser
Mahmoud Nasser
5,507 Points

mmm what is the meaning of an inline element ??