New course! Every coder should learn Generative AI!
Try a free lesson+ 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.
10 Answers
+ 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
+ 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.
+ 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
+ 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;
+ 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.
+ 1
dan Gameing
Here's a bit of adjustment to your code
https://code.sololearn.com/WrIAv9nFXy99/?ref=app
0
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.
- 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;
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Click to Chat
0 Votes
I need help please!!!
2 Votes
What is the output
0 Votes
What is the meaning of this tag
1 Votes