}

传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

一、CSS样式设置小技巧

1.1、水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是 水平居中 显示的。
这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中?
如果被设置元素为文本、图片等行内元素时,水平居中 是通过给父元素设置 text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码:<div class="txtCenter">我想要在父容器中水平居中显示。</div>
代码示例:

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>定宽块状元素水平居中</title>
                <style>
                        div{
                                border:1px solid red;
                                margin:20px;
                        }
                        div.txtCenter{
                                text-align:center;
                        }
                        .imgCenter{
                                text-align:center;
                        }
                </style>
        </head>
        <body>
                <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>
                <!--下面是任务部分-->
                <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
        </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
运行结果:
20190109201348133.png
1.2、水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素 和 不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素:块状元素 的宽度 width 为固定值。)
满足定宽和块状两个条件的元素是可以通过设置 “左右margin” 值为 “auto” 来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:
代码示例:

<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>定宽块状元素水平居中</title>
                <style>
                        div{
                                border:1px solid red;
                                width:200px;   /*定宽*/
                                margin:20px auto;
                        }
                </style>
        </head>
        <body>
                <div>我是定宽块状元素,我要水平居中显示。</div>
        </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
运行结果:
20190109201855496.png
1.3、水平居中总结-不定宽块状元素方法(一)

在实际工作中我们会遇到需要为 “不定宽度的块状元素” 设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
1、 加入 table 标签
2、 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
3、 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
这一小节我们来讲一下第一种方法:
为什么选择方法一加入 table标签 ? 是利用 table标签 的长度自适应性—即不定义其长度也不默认父元素 body 的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
代码示例:

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>不定宽块状元素水平居中</title>
                <style>
                        table{
                                border:1px solid;
                                margin:0 auto;
                        }
                </style>
        </head>
        <body>
                <div>
                        <table>
                                <tbody>
                                        <tr><td>
                                                <ul>
                                                <li>我是第一行文本</li>
                                                <li>我是第二行文本</li>
                                                <li>我是第三行文本</li>
                                                </ul>
                                        </td></tr>
                                </tbody>
                        </table>
                </div>
        </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
运行结果:
222.png
1.4、水平居中总结-不定宽块状元素方法(二)

除了上一节讲到的插入 table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的 display 类型为行内元素,利用其属性直接设置。
第二种方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:
代码示例:

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>不定宽块状元素水平居中</title>
                <style>
                        .container{text-align:center;}
                        .container ul{list-style:none;margin:0;padding:0;display:inline;}
                        .container li{margin-right:8px;display:inline;}
                </style>
        </head>
        <body>
                <div class="container">
                        <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                        </ul>
                </div>
        </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
运行结果:

1.5、水平居中总结-不定宽块状元素方法(三)

除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现。
**方法三:**通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解:假想 ul 层的父层(即下面例子中的 div 层)中间有条平分线将 ul 层的父层(div 层)平均分为两份,ul 层的 css 代码是将 ul 层的最左端与 ul 层的父层(div 层)的平分线对齐;而 li 层的 css 代码则是将 li 层的平分线与 ul 层的最左端(也是 div 层的平分线)对齐,从而实现 li 层的居中。
代码示例:

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>不定宽块状元素水平居中</title>
                <style>
                .container{
                        float:left;
                        position:relative;
                        left:50%
                }
                .container ul{
                        list-style:none;
                        margin:0;
                        padding:0;
                        position:relative;
                        left:-50%;
                }
                .container li{
                        float:left;
                        display:inline;
                        margin-right:8px;
                }
                /*下面是代码任务区*/
                .wrap-center{
                        background:#ccc;
                }
                </style>
        </head>
        <body>
        <div class="container">
                <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                </ul>
        </div>

        <!--下面是代码任务区-->
        <div class="wrap">
                <div class="wrap-center">我们来学习一下这种方法。</div>
        </div>
        </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
运行结果:
20190109204020511.png
---------------------
【转载,仅作分享,侵删】
作者:小刺猬喜歡獨角獸
原文:https://blog.csdn.net/weixin_41835916/article/details/86176010


分享至 : QQ空间
收藏

2 个回复

倒序浏览
看一看。
回复 使用道具 举报
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条