2

是否可以在没有表格的情况下水平和垂直对齐 pre 标签?我想在网页上垂直和水平对齐一些ASCII 艺术。虽然我已经使用表格成功地进行了改编,但我想知道是否可以将其转换为使用其他元素和 CSS。每件 ASCII 艺术作品都有不同的高度和宽度,因此重要的是要注意我的问题的解决方案必须涉及没有固定的高度或宽度要求。

谢谢你。

4

3 回答 3

2

将 er 放入一个 div 并居中,该 div 以其中一种方式进行划分http://tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally /

于 2012-01-16T20:52:19.140 回答
1

PRE 元素默认是元素,因此它与将 div 或段落或 h1 或 h2 元素居中相同。您需要使用 display: table 和 display: table-cell。

我在这里的回答应该有助于解决您的问题......以及在这里找到的小提琴:http: //jsfiddle.net/dcGZm/13/

旧居中的 div 问题中的图像(图像大小可变 - div 大小固定)

于 2012-01-16T22:13:32.233 回答
1

<pre>标签将每个空格都视为不间断空格,即

&nbsp;

并且不会自动删除空格。因此,您可以在 ASCII 艺术作品中填充每一行的右侧。如果 ASCII 艺术中的每一行都包含完全相同数量的字符(包括空格),您可以使用

pre {text-align: center;}

正如鲶鱼建议的那样,他们都会排在一起。

于 2012-08-09T01:59:47.193 回答