+ 3

text-align not working with border

i have been really liking web dev recently but i got this bug the text is no longer aligning to the middle and i don't know why Check out the code: https://codepen.io/DanGaming/pen/WNNzxPW apart from that i love code. something tells me that javascript is going to be a hard to learn.

html css text border web

5th Nov 2019, 4:52 PM

doonv

10 Respostas

+ 6

dan Gameing Hey dude, people are giving solutions to you only to help, Yess we are all blind here maybe, But Im sure you can very well see that your code doesn't have line-height in it, I can see KitKat [Chocolate] ▶ 🍫 gave you the solution, text in his code is aligned, I noticed the difference, Why cant you see how and understand what the difference is Mr. 100% perfect vision man

6th Nov 2019, 6:06 AM

ASM

+ 2

Make sure your HTML is in the following format: <html> <head> <title>Page Title</title> </head> <body> <h1>Title</h1> </body> </html> That means your title being in the body, and make sure you have closing tags for both <head> and <body> elements. Better still, try putting your code into the Code Playground on SoloLearn. Open up a fresh "Web" code and copy it in post the link to here. That way it's much easier for us to see the issue.

5th Nov 2019, 5:01 PM

Russ

+ 2

dan Gameing No negative language please. He's just trying to help (Not quite well though). You should just specify to him more what your question meant rather than saying that In response to your question, I think the best option is to use the margin property in CSS. That should work pretty well

5th Nov 2019, 6:03 PM

Hayzeed

+ 2

https://code.sololearn.com/WKQDp1jdc7zI/?ref=app

5th Nov 2019, 6:05 PM

🍇 Alex Tușinean 💜

+ 1

For the text in the h1, you can use css: line-height:100px; For the text in the paragraph, all you need is the css text-align:center;

5th Nov 2019, 5:38 PM

🍇 Alex Tușinean 💜

+ 1

dan Gameing no. I am not blind. Text align will align your text only horizontal. To align the text vertical, there are a few ways, but the one I know the best is with: line-height:height of your container (100px for example); Or you can just use height:auto; and maybe padding. This way should work too.

5th Nov 2019, 6:03 PM

🍇 Alex Tușinean 💜

+ 1

dan Gameing Here's a bit of adjustment to your code https://code.sololearn.com/WrIAv9nFXy99/?ref=app

5th Nov 2019, 6:40 PM

Hayzeed

here https://code.sololearn.com/Wb37jYOXNe9H

5th Nov 2019, 5:12 PM

doonv

dan Gameing I'm still not sure what the question is that you're asking but I'll try and cover anything I think you may mean. If you mean text in your h1 not being centred horizontally, it's because you have set the width as 500px which is less than the width of the area. You can remove it and it will fill the full width of the screen, or you can set the width to 100%. If you want the text to sit in the middle of your box (both vertically and horizontally) set display to table-cell and vertical-align to middle. Hope this helps.

5th Nov 2019, 6:18 PM

Russ

- 2

kitkat are you blind? there is a text-align: center; in my css. Look: h1{ border: 5px solid darkblue; border-style: inset; background-color: darkblue; width: 500px; height: 100px; line-height: 100px; /* text info/data */ font-weight: bolder; font-size: XX-large; text-align: center; <----- color: #4dc3ff; }

5th Nov 2019, 5:55 PM

doonv