CSS3学习笔记 div下的元素居中显示

CSS3 04/13 阅读 11 views次 人气 0
摘要:

margin属性,在一个声明中设置所有外边距属性。该属性可以有1到4个值。text-align属性,对齐元素中的文本。

margin:0 auto; 

1、设置对象上下间距为0,左右自动。

2、DIV布局水平居中于浏览器中,目的就是兼容各大浏览器让布局居中。


margin.png


margin:10px 20px 30px 40px;

上外边距是 10px;

右外边距是 20px;

下外边距是 30px;

左外边距是 40px;


margin:10px 20px 30px;

上外边距是 10px;

右外边距和左外边距是 20px;

下外边距是 30px;


margin:10px 20px;

上外边距和下外边距是 10px;

右外边距和左外边距是 20px;


margin:10px;

所有 4 个外边距都是 10px;


text-align属性指定元素文本的水平对齐方式

文本居中.png


代码实例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>div下的元素居中显示</title>
</head>
<body>
    <div style="margin:0 auto;text-align:center;">
       <div style=" border:1px solid red;">
          <span style="display:inline-block;">1</span>
          <span style="display:inline-block;">2</span>
          <span style="display:inline-block;">3</span>
       </div>
    </div>
</body>
</html>


评论

表情

分享到: