CSS-div水平居左-居右-居中显示

预立科技

于 2020-01-23 11:41:42 发布

阅读量2.9w

点赞数 9

分类专栏： CSS 文章标签： css div水平居左-居右-居中显示 div水平居左 div水平居右 div水平居中

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/sinat_16998945/article/details/104074777

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

知识点

1.div是块级元素,特性是块级元素独占一行显示,三个div默认会显示三行。

2.在div块级元素,加上css的display:inline属性可以修改成行内元素,三个div都加上css的display:inline属性,则会在一行中显示。

3.要实现div元素居中,需要设置父级元素内容居中text-align: center;

4.通过浮动float,设置居右或居左

<html>
<head>
    <style>
        .divWidth{
            width: 100px;
            height: 100px;
            background-color: sandybrown;
            display: inline-block;
        }

        .divCenter{
            text-align: center;
        }

        .divLeft{
            float:left;
        }

        .divRight{
            float:right;
        }
    </style>
</head>
<body>
    <div class="divCenter">
        <div class="divWidth divLeft">
            居左 居左
        </div>
        <div class="divWidth"> 
            居中 居中
        </div>
        <div class="divWidth divRight">
            居右 居右
        </div>
    </div>
</body>
</html>

在这里插入图片描述

欢迎加群，日用儿童母婴分享大牌淘宝京东优惠券
在这里插入图片描述

在这里插入图片描述

预立科技

关注

9
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
CSS-div水平居左-居右-居中显示

知识点1.div是块级元素,特性是块级元素独占一行显示,三个div默认会显示三行。2.在div块级元素,加上css的display:inline属性可以修改成行内元素,三个div都加上css的display:inline属性,则会在一行中显示。3.要实现div元素居中,需要设置父级元素内容居中text-align: center;4.通过浮动float,设置居右或居左 <h...
复制链接

扫一扫