Горизонтально и вертикально центрировать предварительный тег без использования таблиц?

Question

Возможно ли горизонтальное и вертикальное выравнивание предварительного тега без таблиц? Я хочу выровнять по вертикали и горизонтали некоторые ASCII art на веб-странице. Хотя я уже произвел успешную адаптацию с использованием таблиц , я хочу знать, возможно ли преобразовать ее в другие элементы и CSS. Каждое произведение искусства ASCII имеет разную высоту и ширину, поэтому важно отметить, что решение моей проблемы должно заключаться в отсутствии требования о фиксированной высоте или ширине.

Спасибо.

Answer 1

Брось в div и центр, который делит один из этих способов http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Answer 2

Тег <pre> обрабатывает каждый пробел как неразрывный пробел, т.е.

 

и автоматически не удаляет пробелы. Таким образом, вы можете добавить правую сторону каждой строки в вашем ASCII-произведении. Если каждая строка в ASCII-изображении содержит одинаковое количество символов (включая пробелы), вы можете использовать

pre {text-align: center;}

как предложил Catfish, и все они выстроятся в линию вместе.

Answer 3

элемент PRE по умолчанию является элементом block , поэтому он аналогичен центрированию элемента div или абзаца или элемента h1 или h2.Вам нужно использовать display: table и display: table-cell.

Мой ответ здесь должен помочь решить вашу проблему ... и найти здесь скрипку: http://jsfiddle.net/dcGZm/13/

старый центр изображение в выпуске div (переменная размера изображения - фиксированный размер div)