CSS 8.1 高级-对齐

CSS 8.1 高级-对齐

一．居中对齐，使用margin属性，将左右外边距设为auto。

注1：浏览器在显示时，默认左对齐。包含外边距的左对齐。这里要实现居中对齐是相对于边框border说的。

注2：将左右边距设为auto，实际上左右边距=(父元素宽度-此元素宽度)/2。从外边距的角度看是做对齐，从边框的角度看是居中了。

注3：margin只用来居中对齐才好用，若用来左对齐好说，margin不设，即为0。若用来右对齐，必须知道margin-left=多少(父元素-此元素)。

注4：margin可以用在文字中，也可用于图像中。对图像加margin是可以的。padding，border一样。

例如：

.center{
  margin-left:auto;
  margin-right:auto;
  width:70%;
  background-color:#b0e0e6;
}
<div class="center">
  <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  <p><b>除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</b></p>
</div>

结果：

 

解释：

1.由于没有设置内边距padding，所以边框与内容间没有距离。注意：背景作用于元素的border边框范围。

2.只有width小于父元素时，才有对齐效果。

3.除非已经声明了 !DOCTYPE，否则使用margin:auto在IE8以及更早的版本中是无效的。

4.在 IE 中，对于块元素存在一个外边距处理方面的BUG。如需使上面的例子在IE中有效，请添加一些额外的代码。参见四.关于text-align

 

二．使用position属性，进行左和右对齐

注：绝对定位元素会被从正常流中删除，并且能够交叠元素。且其父元素对其无继承。

例如1，无继承：

.container{
  background-color:#888;
  position:relative;
  width:100%;
}
.right{
  position:absolute;
  right:0px;
  width:50%;
}
<div class="container">
  <p>这是段落。这是段落。这是段落。</p>
  <div class="right">
    <p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！ 如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>
  </div>
  <p>这是段落。这是段落。这是段落。</p>
</div>

结果：

 

例如2，重叠：

.container{
  background-color:#888;
  position:relative;
  width:100%;
}
.right{
  position:absolute;
  right:0px;
  width:50%;
  background-color:#b0e0e6;
}
<div class="container">
  <p>这是段落。这是段落。这是段落。</p>
  <div class="right">
    <p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>
  </div>
  <p>这是段落。这是段落。这是段落。</p>
</div>

结果：

 

 

三．使用float属性，进行左右对齐

例如：

.right{
  float:right;
  width:300px;
  background-color:#b0e0e6;
}
<div class="right">
  <p><b>注释：</b>当使用 float 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>
</div>

结果：

 

四．关于text-align

1.text-align属性只能用于块元素，不能直接用于内联元素，如img

2.text-align作用于元素中所有内联内容的对齐样式，比如：

注：这实际上是继承。

div.align{

text-align:center;

}

<div class=”align”>

<p>这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。</p>

<img src=”/i/eg_smile.gif”>

</div>

结果：图片文字都居中显示，如下：

3.但是，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。猜猜是哪个浏览器这么特立独行啊？ IE！！

IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。
若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：

代码如下：

.container{
  text-align:center;
}
.center{
  margin-left:auto;
  margin-right:auto;
  width:70%;
  background-color:#b0e0e6;
  text-align:left;  
}
<div class="container">
  <div class="center">
    <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
    <p><b>除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</b></p>
  </div>
</div>

结果：