Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 108
  • Last Modified:

Using CSS To Allow Text To Expand Upward And Downward Horizontally From The Center

Greetings:

I have text dynamically added to a web page heading. The heading allows for 2 lines of text contained in a single web control. The text will automatically wrap if needed. If the heading is one line it appears in the center of the page heading i.e. there is equal space above and below the text in the heading. If I have 2 lines of text the web control expands from the horizontal center of the page heading such that the 1st line is positioned up half the line height and the 2nd line is pushed down half the line height. The result is a heading which is again centered horizontally within the page heading.

Any suggestions from the experts is most appreciated on how to accomplish this via CSS.

Thank you kindly,
David Bach
0
David Bach
Asked:
David Bach
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
Absolutely position your div with the top left corner at dead center of the window. Then transform/translate your div -50% vertical and horizontal. This will center the text vertically regardless of how many lines it is. Look at this fiddle and add more content to generate more lines of depth. Remove the border and background color if you don't need it.
width: 180px; height: auto;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);

Open in new window

2
 
David BachAuthor Commented:
WOOT! ... Thank you, Kim!

This was right on what I wanted to do!


Thank you very much for your prompt reply and perfect answer.

David Bach
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You're welcome.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now