Question

我正在制作一个非常简单的html网页，仅包含文字。如何缩小单列以使读者更容易阅读？

我希望文本正文大致位于页面的中心并左对齐，左边和右边的空白边距（大致相等）。

Answer 1

将文本放在带有样式的DIV中以控制宽度：

<DIV style="width: 300px">
    Text goes here.
</DIV>

根据安吉拉在评论中的建议进行集中：

<DIV style="width: 300px; margin: 0 auto">
   Text goes here.<br>
    And another line which is much longer.
</DIV>

Answer 2

完整的跨浏览器解决方案

html：

<div id="centered"><!-- put your content here --></div>

CSS：

body {
   text-align:center; /* this is required for old versions of IE */
}
#centered {
   width:400px; /* this is the width of the center column (px, em or %) */
   text-align:left; /*resets the text alignment back to left */
   margin:0 auto; /* auto centers the div in standards complaint browsers */
}

就是这样，享受！

Answer 3

使用CSS ...

body {
  margin:0 auto;
  width:600px;
}

Answer 4

其他人给出的宽度建议是关键。从可用性的角度来看，您肯定希望确保您没有多个列报纸风格 - 人们不习惯以这种方式阅读网页。但是对于不相关的内容是可以的。

Answer 5

如果你想要多个列，你可以建立在Earwicker的答案上，例如：

<div style="float: left; width: 300px">
   First Column
</div>
<div style="float: left; width: 300px; margin-left: 1em;">
   Second Column
</div>

Answer 6

这是一种更灵活的现代解决方案：设置最大宽度允许在窄视口中显示时，列更小。它还使用rem，这是字符的宽度和文本的更好单位。示例中的20rem是触发此布局的，但通常建议使用60到80之类的文本行。

＆＃13;

p {
  max-width: 20rem;
  margin: auto;
}

＆＃13;

<html>

<body>

  <p>
    AT&T and Johnson & Johnson, among the biggest advertisers in the United States, were among several companies to say Wednesday that they would stop their ads from running on YouTube and other Google properties amid concern that Google is not doing enough
    to prevent brands from appearing next to offensive material, like hate speech.
  </p>

</body>

</html>

＆＃13;

在网页中缩小单列文本

6 个答案:

完整的跨浏览器解决方案