[HELP] HTML/CSS: How to vertically align text and random border not going away

[Anthony10]

Okay so I am working on this http://www.codecademy.com/anatelli/codebits/gKM7IM (the pictures of the ocean are just place holders) and I have two problems I can not figure out, I am new to coding so I am sorry if I sound real stupid.

 

Problem #1:

There is a white border around the entire webpage that I can not locate the origin of, I do not remember creating it. I have looked over my CSS and HTML files and can not determine what is causing it. I would like to remove the border.

edit: thank you to @Damikiller37 for providing a solution

 

Problem #2:

I would like to vertically align the text on the images. They are already horizontally aligned. I have tried the "vertical-align: middle" style and in CSS which has not worked, maybe I am using it wrong though.

 

 

Thank you guys for your help, it is much appreciated.

 

P.S. the website is still a huge WIP (I know that it looks ugly and is very incomplete)

[Damikiller37]

Problem #1:
Add the following to your CSS:

body {     margin: 0;    padding: 0;}

Problem #2:
@Anthony10 I was going to post the same answer as @Hazy125 so look at his post

[Anthony10]

Problem #1:

Add the following to your CSS:

body {     margin: 0;    padding: 0;}

Problem #2:

I used to know how to do it. I will edit this part once I figure it out.

Thanks man I appreciate it that fixed it. Hopefully you figure out the second one, it's been bugging me because I can usually research answer things but haven't found much.

[Hazy125]

The easiest way with the most support for just that is using the line height property. Because those images are 300px tall, if you wrap the text inside a span with a class then you can add this

.vertAlignText{    line-height: 300px;}

This will align it in the centre vertically. Be warned, this will not work on multiple lines of text. So, some alternatives are:

 

Give the parent div the css of display:table; and the child (the text) the CSS of display:table-cell; Then you should be able to successfully use vertical-align:middle; on the text. I didn't use this method because browser compatibility isn't as good and requires a few hacks for the usual suspect browsers

 

Another alternative is to use the translate x and translate y properties. I personally believe that unless the next CSS spec contains something that expressly centres everything the way you want it to, this will be how you centre everything in the future. Right now it's a bit not so good, it's not supported currently in many browsers, at least, not properly. But it's simply:

.centeredThing{    position: relative;    top: 50:    transform: translateY(-50%);}

This works like a charm^^^ When it does work

[Anthony10]

The easiest way with the most support for just that is using the line height property. Because those images are 300px tall, if you wrap the text inside a span with a class then you can add this

.vertAlignText{    line-height: 300px;}

This will align it in the centre vertically. Be warned, this will not work on multiple lines of text. So, some alternatives are:

 

Give the parent div the css of display:table; and the child (the text) the CSS of display:table-cell; Then you should be able to successfully use vertical-align:middle; on the text. I didn't use this method because browser compatibility isn't as good and requires a few hacks for the usual suspect browsers

 

Another alternative is to use the translate x and translate y properties. I personally believe that unless the next CSS spec contains something that expressly centres everything the way you want it to, this will be how you centre everything in the future. Right now it's a bit not so good, it's not supported currently in many browsers, at least, not properly. But it's simply:

.centeredThing{    position: relative;    top: 50:    transform: translateY(-50%);}

This works like a charm^^^ When it does work

thanks!

[Aho]

I personally believe that unless the next CSS spec contains something that expressly centres everything the way you want it to, this will be how you centre everything in the future.

I believe the flexbox is what we've all been waiting for.

[Anthony10]

The easiest way with the most support for just that is using the line height property. Because those images are 300px tall, if you wrap the text inside a span with a class then you can add this

.vertAlignText{    line-height: 300px;}

This will align it in the centre vertically. Be warned, this will not work on multiple lines of text. So, some alternatives are:

 

Give the parent div the css of display:table; and the child (the text) the CSS of display:table-cell; Then you should be able to successfully use vertical-align:middle; on the text. I didn't use this method because browser compatibility isn't as good and requires a few hacks for the usual suspect browsers

 

Another alternative is to use the translate x and translate y properties. I personally believe that unless the next CSS spec contains something that expressly centres everything the way you want it to, this will be how you centre everything in the future. Right now it's a bit not so good, it's not supported currently in many browsers, at least, not properly. But it's simply:

.centeredThing{    position: relative;    top: 50:    transform: translateY(-50%);}

This works like a charm^^^ When it does work

after a lot and a lot more research and looking at examples, I found the line-height is great for single lined things like headers, but for things with extra paragraphs and supporting content, wrapping the entire thing with a divider and setting the style of that divider to the height and background image, then wrapping the text with a different divider and using the position and top you mentioned. This is what mine looked like:

 

HTML File excerpt:

 <div class="jumbotron">  <div class="jcontainer">   <h1>Live Tech Support</h1>   <p>Get help real-time with real people.</p>  </div> </div>

CSS File excerpt:

.jumbotron {    background-image: url('http://www.orpc.co/App_Themes/ORPCTheme/images/ocean_bgimg.jpg');    height: 300px;}.jumbotron .jcontainer {    position: relative;    top: 100px;    text-shadow: 0px 0px 15px #000000;    text-indent: 30%;    color: white;}

Thanks again so much!