Horizontally and vertically center a pre tag without the use of tables?

Question

Is it possible to horizontally and vertically align a pre tag without tables? I want to vertically and horizontally align some ASCII art on a webpage. While I have already produced a successful adaption using tables, I want to know if its possible to convert it to using other elements and CSS. Every piece of ASCII art is a different height and width, so therefore it is important to note that the solution to my issue must involve not having a fixed height or width requirement.

Thank you.

Answer 1

Throw er in a div and center that div one of these ways http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Answer 2

the PRE element is a block element by default, so it is the same as centering a div or a paragraph or an h1 or h2 element. You need to use display: table and display: table-cell.

My answer here should help solve your problem... and the fiddle found here: http://jsfiddle.net/dcGZm/13/

The old center a image in a div issue ( image size variable - div size fixed )

Answer 3

The <pre> tag treats every space as a non-breaking space, i.e.

 

and won't automatically remove whitespace. So, you can pad the right side of each line in your ASCII art. If every line in the ASCII art contains exactly the same number of characters (including spaces) you can use

pre {text-align: center;}

as Catfish suggested and they'll all line up together.