Source Code:
(back to article)
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background: #c2c2c2; font-size: 90%; } div { background: #fff; width: 240px; height: 200px; margin: 15px; color: #fff; resize: vertical; overflow: auto; padding: 20px; } .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; width: 190px; margin: 0; padding: 10px; background: #83d483; } </style> </head> <body> <div class="ghost-center"> <p>Example of vertically centered multiple lines in a container.</p> </div> </body> </html>
Result:
Report an issue