Question

我想在页面中间使用div，div应为561px，文本需要左对齐。

<div id="notes">
aaaaaaaaa
a
aaaaaaa
aaaaaaaaa
</div>

Answer 1

两件事。首先：

#notes { width: 561px; margin: 8 auto; text-align: left; }

其次，请确保您的网页有DOCTYPE声明（主要是为了IE的好处）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

margin: 0 auto是将块元素居中的标准方法。这是一种速记语法。请参阅8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'的Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification：

'margin'属性是一种速记   设置'margin-top'的属性，   'margin-right'，'margin-bottom'和   'margin-left'在同一个地方   样式表。

如果只有一个值，则适用   各方面。如果有两个值，   顶部和底部边距设置为   第一个值和右边和左边   边距设置为第二个。如果   有三个值，顶部设置   到第一个值，左边和右边   设置为第二个和底部   设置为第三个。如果有四个   值，它们适用于顶部，右边，   分别是底部和左边。
body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

因此auto中的margin: 0 auto;表示：

margin-left: auto;
margin-right: auto;

在这种情况下，浏览器将使块元素居中。 IE 不会执行除非它处于符合标准的模式，您可以通过提供DOCTYPE声明来强制执行此模式。请参阅Quirks mode and strict mode。

Answer 2

在样式表中执行：

#id {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 561px;
}

居中对齐的div，其文本与左侧对齐

2 个答案: