元素居中对齐

 

    要水平居中对齐一个元素(如<div>),可以使用margin:auto;。

 

    设置到元素的宽度将防止它溢出到容器的边缘。

 

    元素通过指定宽度，并将两边的空外边距平均分配：

 

    实例

 

    .center{

 

    margin:auto;

 

    width:50%;

 

    border:3pxsolidgreen;

 

    padding:10px;

 

    }

 

    注意:如果没有设置width属性(或者设置100%)，居中对齐将不起作用。

 

    文本居中对齐

 

    如果仅仅是为了文本在元素内居中对齐，可以使用text-align:center;

 

    实例

 

.center {

 

    margin: auto;

 

    width: 50%;

 

    border: 3px solid green;

 

    padding: 10px;

 

}

 

    提示:更多文本对齐实例，请参阅CSS文本章节。

 

    图片居中对齐

 

    要让图片居中对齐,可以使用margin:auto;并将它放到块元素中:

 

    Paris

 

    实例

 

.center {

 

    text-align: center;

 

    border: 3px solid green;

 

}