vertical align in div

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I'm having difficulties vertical aligning text in a div with a border...

code I'm using

<!--

<div style="width:200px;height:100px;border:3px solid yellow;">
GETTING STARTED
</div>

-->

Any help appreciated! :)
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.com

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Donald

Perhaps, I'm being too simplistic but if you add the code to a Text Widget through the HTML button, you can then control the vertical alignment by using the enter key directly through the Text Widget.

If I'm not understanding your intent, please do let me know and I'll try to think of alternatives for you.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
there are tags such as

<!--

valign="middle"

and

vertical-align="middle"

-->

they work the same way as in Excel. If you've ever used this feature in excel, what it does is centers text PERFECTLY between the top and bottom border and same for html. When you use the enter key, it's not an exact presumption to be in the middle. I've been attempting to vertically align and can't seem to get it right!

Here's a resource, just in case you don't understand the concept of vertical alignment...

http://phrogz.net/css/vertical-align/...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Give this a try:

<div style="display: table; height: 300px;background: #aaa; position: relative; overflow: hidden;">
<div style="position: absolute; top: 50%; display: table-cell; vertical-align: middle;">
<p style="position: relative; top: -50%">This text is at the middle of the div area, instead of at the top where it defaults to</p>
</div>
</div>
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
looks like it might be a good code, I'll give it a try in a little bit! Thanks! :)