How can i center my content ?

MY CODE :- --------------------------------HTML--------------------------------- <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p class="clip">Background-Clip</p> </body> </html> --------------------------------CSS----------------------------------- body { padding:0px; margin: 0px; } .clip { color: black; width: 150; height: 100; border: 2px solid black; padding-top: 50px; } Now what i want ir, to center my text in the content box, I tried adding padding on top but that moves the whole content box down so i tried text-alignt:center but it only centers the text from left to center but it does not move the text from top to mid bottom. How Can I Do That?

css padding error problem box help space content center middle content-box

8th Feb 2017, 1:19 PM

Hussain Mohammed

6 Answers

+ 3

I read too quickly ^^ For center align verticaly, while you have once line of text, you can add: line-height:100; /* the height of your block */ Unit must ne absolute, with relative ones, behaviour may be different in regards of source of relative unit is for 'height' or 'line-height' ( may differs )... Else, you have Flex solution ( but I don't be able to explain :P ) or <table> behaviour... in your case, add to yours css rules: body { display:table; table-layout:fixed; width:100%; } .clip { display:table-cell; vertical-align:middle; } In most of cases, you will avoid to apply a <table> family behaviour on <body> element, but sometimes it doesn't be troublesome ;)

8th Feb 2017, 1:46 PM

visph

+ 2

In all cases, you need to delete your padding definition in '.clip' class, to allow correct vertical centering ^^ And for the first solution ( line-height ), you need to precise 'px' unit, as behaviour in this context seems to be implicitly set as other than in 'height' context, no unit is implicitly set to 'px'... ( I also edited previous post for typo mistake: 'verical' instead 'vertical' in css rules... )

8th Feb 2017, 1:55 PM

visph

+ 2

I don't remember... but the line-height solution is almost a trick, working only with a single line of text: this is not an official way to vertical centering :P

8th Feb 2017, 2:11 PM

visph

+ 2

There's isn't realy not much as newly Flexbox ( really design for that purpose among others html layout lacks ), and the relatively recent official availablity of 'table' family values, to avoid the unofficial way of using too much nested <table> element for layout purposes ^^

8th Feb 2017, 3:12 PM

visph

Again Thank you so much Visph, You solved my problem but did i miss this subject in sololearn's learning section or they did not mention about line-height ?

8th Feb 2017, 2:08 PM

Hussain Mohammed

"I don't remember... but the line-height solution is almost a trick, working only with a single line of text: this is not an official way to vertical centering :P" Then what is the official solution for this problem?

8th Feb 2017, 3:05 PM

Hussain Mohammed