如何在不使用表的情况下居中文本块 [英] How to center block of text without using tables

问题描述

我正在努力避免使用< table>用于格式化目的，其他，

合理的手段存在。我很难找到一种方法来找到与以下代码相当的

等价物。


< table align =" center">

< tr>

< td> abc< / td>

< / tr>

< / table>

我从上面的代码得到的*期望*行为是它水平地

将整个*块*文本居中放在页面顶部不要
要求*块内的*文本居中。更多

具体来说：


（1）当

< td>内有少于1行全文的文字时;标签，文本在屏幕上水平居中显示。


（2）当< td>

内有多行文字时（如果你在abc之后添加文字），所有文字行显示为对齐

到左边。


看起来理想的效果来自于表格和表格单元格如何大小;浏览器正在调整表格和单元格的大小，以便它们在水平方向上尽可能小地显示文本，同时避免在避免可能的情况下包裹

。有没有办法实现相同的

结果而不使用适用于IE 6，Firefox 1.1和

的表，也许是Opera 8？

谢谢，

Mark Schneider

解决方案

" Mark Schneider" <去******** @ markschneider.com>写道：

我从上面的代码得到的*期望*行为是它水平
将整个*块*文本居中在页面顶部而不是

p {width：20em; margin-right：auto; margin-left：auto}

>
< p> abc< / p>


-

Spartanicus

< blockquote>感谢您的回复。虽然您建议将边距设置为

auto并明确设置宽度会导致< p>块

元素居中，它没有给我在

item（2）中提到的效果，即* text *水平居中于

屏幕。似乎明确设置了< p>的宽度。标签

导致它偏离中心。你可以通过将宽度从20em更改为30em来最好地看到它已经关闭了

。


- Mark

" Mark Schneider" <去******** @ markschneider.com>写道：

虽然你建议将边距设置为
auto并明确设置宽度确实会导致< p>阻止
元素居中，它没有给我在
item（2）中提到的效果，即* text *在
屏幕上水平居中显示。

决定你想要什么：


"同时不要求*块内的*文本居中。


-

Spartanicus

I''m trying to avoid using <table> for formatting purposes where other,
reasonable means exist. I''m stuck trying to find a way to find an
equivalent for the code below.

<table align="center">
<tr>
<td>abc</td>
</tr>
</table>
The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text at the top of the page while not
requiring that the *text within* the block be centered. More
specifically:

(1) When there is less than 1 full line worth of text within the
<td> tag, the text appears horizontally centered on the screen.

(2) When there is more than one line worth of text within the <td>
(if you add text after "abc"), all the lines of text appear justified
to the left.

It seems the desirable effect results from how tables and table cells
are sized; the browsers are sizing tables and cells such that they are
horizontally as small as possible to display the text while avoiding
wrapping when avoiding is possible. Is there a way to achieve the same
results without using a table that works with IE 6, Firefox 1.1, and
perhaps Opera 8?

Thanks,
Mark Schneider

解决方案

"Mark Schneider" <go********@markschneider.com> wrote:

The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text at the top of the page while not
requiring that the *text within* the block be centered.

p{width:20em;margin-right:auto;margin-left:auto}

<p>abc</p>

--
Spartanicus

Thanks for the reply. Although your suggestion of setting margins to
auto and explicitly setting the width does result in the <p> block
element being centered, it does not give me the effect I mention in
item (2), which is that the *text* appears horizontally centered on the
screen. It seems that explicitly setting a width for the <p> tag
causes it to be off center. You can probably best see that it''s off
center by changing the width from 20em to 30em.

-- Mark

"Mark Schneider" <go********@markschneider.com> wrote:

Although your suggestion of setting margins to
auto and explicitly setting the width does result in the <p> block
element being centered, it does not give me the effect I mention in
item (2), which is that the *text* appears horizontally centered on the
screen.

Make up your mind as to what you want:

"while not requiring that the *text within* the block be centered. "

--
Spartanicus

这篇关于如何在不使用表的情况下居中文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！