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 p

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> 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.

Answer 3

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 )