首页>>网站建设>>Javascript>>经验笔记

在CSS层叠样式表中，对齐方式对于布局来说是一个非常重要的属性了，它是完成精细布局的大项。

一、水平对齐

1、元素的水平居中。使用margin:auto来实现，但是需要注意的是一定要定义元素宽度，否则将不起作用。

<style>
          .center {
            margin: auto;
            width: 50%;
            border: 3px solid green;
            padding: 10px;
        }
</style>
 <div class="center">这里是元素居中</div>

效果如下：



如果想要左对齐可以设置margin-left:0px;相应的右对齐可以使用margin-right:0px;

2、元素内文本居中，可以使用text-align:center属性来定义。

<style>
          .center {
            margin: auto;
            width: 50%;
            border: 3px solid green;
            padding: 10px;
            text-align: center;
        }
</style>
    <div class="center">这里是元素居中</div>

效果如下：



如果想要左对齐可以使用text-align:left.如果想要右对齐可以使用text-align:right。

二、垂直布局

1、元素的垂直布局

元素的垂直方向布局可以使用margin也可以使用padding，前面说过关于这两个属性的用法，这里就不做介绍了。

2、文本的垂直布局

文本的垂直布局可以使用元素标签的padding也可以使用margin可控制垂直方向的位移，然后水平方向使用text-align属性即可配合制作出任何位置的文本。简单效果如下：



学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~