I have come across an old web page that features a single paragraph of centered text on the screen, aligned both horizontally and vertically.
Here is the original code:
<html>
<body>
<center><table height='100%'>
<tr style="vertical-align:middle"><td>
<pre style="font-size: xx-large">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table></center>
</body>
</html>
The rendering might not be correct in jsFiddle, however, when viewed as a standalone page, it works fine as shown here.
I intend to update the markup to modern standards while maintaining the same basic layout (especially with the centered text block). How can I achieve this using CSS? It would be great to have a solution that doesn't rely on tables since the data is not tabular, but any method will do.
Below is the new markup I've prepared for the page, lacking only the centering:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>/usr/bin/fortune</title>
<style>
p {
font-size: xx-large;
font-family: monospace;
white-space: pre;
}
/* insert CSS for centering here */
</style>
</head>
<body>
<p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).</p>
</body>
</html>