学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十九) 对齐方式

发布时间:2020-01-15点击:

    在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属性即可配合制作出任何位置的文本。简单效果如下:

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

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐