2

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.

Zack Zatkin-Gold
  • 814
  • 9
  • 29

3 Answers3

2

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

Catfish
  • 18,876
  • 54
  • 209
  • 353
  • 1
    This didn't work for me because the ASCII art has a fixed width. – Zack Zatkin-Gold Jan 16 '12 at 20:55
  • @zzatkin I'm not sure about centering vertically if you don't know the height of the item in the div, but you can wrap the 
     tag in a div, then center the div, without declaring a height or width.
     – LisaEB Jan 16 '12 at 21:10
  • I take it back; looking at it again, if one line is longer than the others it centers improperly, thus destroying the image. It can be done with a div and some jQuery(horizontally -and- vertically!), but that's somewhat outside the scope of the question at the moment. – LisaEB Jan 16 '12 at 22:39
  • 1
    At this point, it seems like nobody has a correct answer so going outside the scope would be insightful. – Zack Zatkin-Gold Jan 16 '12 at 23:07
1

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

&nbsp;

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.

j0k
  • 22,600
  • 28
  • 79
  • 90
Allin
  • 11
  • 1
1

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 )

Community
  • 1
  • 1
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154