一、居中
1. 居中对齐元素
将块元素水平居中对齐(像<div>) , 运用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。
然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：
这个div是居中的。
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
留意：假设没有设置宽度属性，则居中对齐没有效果 (或许设置到100%).
2. 居中对齐文本
将元素外部的文本居中, 运用text-align: center;
这些文本是居中的。
.center {
text-align: center;
border: 3px solid green;
}
3. 居中图片
居中图片, 运用 margin: auto; 并且设置为块级元素:
img {
display: block;
margin: auto;
width: 40%;
}
二、左右
HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程字典</title>
</head>
<body>
<h2>右对齐</h2>
<p>如何正确定位元素与位置属性的一个例子:</p>
<div class="right">
<p>在我年轻而软弱的岁月里，父亲给了我一些我不断以来不断在思索的建议.</p>
</div>
</body>
</html>
1. 左右对齐 - 运用 position
对齐元素的一种办法是运用 position: absolute;
在我年轻而软弱的岁月里，父亲给了我一些我不断以来不断在思索的建议。
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
留意：
相对定位元素从正常流中移除，并且可以堆叠元素。
当运用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同阅读器的视觉差异。
还有IE8和早期版本有一些成绩, 当运用 position. 假设容器元素有一个指定的宽度 (例如： <div class="container">) , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到左边. 这似乎是一条为滚动条预留空间. 因此，总是声明 !DOCTYPE 当运用 position时:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
2. 左右对齐 - 运用 float
对齐元素的另一种办法是运用 float 属性:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
提示：
当将元素运用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同阅读器的视觉差异。
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
(责任编辑：admin)