Middling the title

[terryds]

Look at : http://terryds.net63.net/

 

I want my #title Terry Djony Official Website get to the middle when the page-header becomes 200px or larger ( like the one in http://terryds.net63.net/ )

 

I want my #title get to the middle of the page-header no matter how high the page-header is...

 

Any solutions ?

[davej]

You gave us the same link twice.

[terryds]

Sorry for my bad English skill ...

 

I mean, in http://terryds.net63.net/ , then i inspect the elements , then i change the #page_header to 200px ...

 

So, the #page_header height becomes 200px , but the #title doesn't automatically moved to the middle of the page header ...

 

 

Can you tell me how to make the #title get to the middle of page header automatically even if the page header's height changes ?

[davej]

By "middle" I guess you mean vertical centering? I don't know how to do it automatically when you have float involved. You need one of the css gurus to answer that. All I can offer is a manual adjustment...

#title {	text-align: center;	line-height: 150px;	/*vertical-align: middle;*/}

Edited September 6, 2013 by davej

[terryds]

Can you tell me why vertical-align:middle doesn't work ?

[dsonesuk]

If you want it to work how you want it, give parent element display: table;, and header title display: cell; and apply vertical-align: middle to this as well, you will have to make adjustments to the nav, but it should position text in middle vert/horz.

[DarkxPunk]

I agree with dsonesuk. If you make the #page_nav display: table-row and give it a height of 0 and a width of 100%, and than the #title display: table-cell. It works fine.

 

Personally I think you could improve on the code using these suggestions so play around.

[terryds]

Thanks for the answer.... It works well....

But, i want to ask something..

 

Does vertical-align just work for table ?

[dsonesuk]

No, check out http://www.w3schools.com/cssref/pr_pos_vertical-align.asp for example

[terryds]

Yeah, i have opened that link.... But, i still wonder why i should make it display as table...

 

In http://www.w3schools.com/cssref/pr_pos_vertical-align.asp , it says when the vertical-align:middle, it will make it placed in the middle of parent element.

 

But, if i just use vertical-align : middle without displaying it as a table, it doesn't work...

 

 

Can you tell me why i should use display:table ?

[dsonesuk]

Because its more relation to the text, use of table/cell is in relation to cell height, much like a normal table.