zoukankan      html  css  js  c++  java

  • 从零开始学习html（十五）css样式设置小技巧——上

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

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

    我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

    这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

     

    我们先来了解一下行内元素怎么进行水平居中？

     

    如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

    (父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

    html代码：

    <body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

    css代码：

    <style>
  .txtCenter{
    text-align:center;
  }
</style>

    任务

    来试试：把图片设置为水平居中显示。

    参考代码：

    div.imgCenter{

    text-align:center;

    }

    二、水平居中设置-定宽块状元素

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>定宽块状元素水平居中</title>
 6 <style>
 7 div{
 8     border:1px solid red;
 9     
10     width:200px;
11     margin:20px auto;
12 }
13 
14 </style>
15 </head>
16 
17 <body>
18 <div>我是定宽块状元素，我要水平居中显示。</div>
19 </body>
20 </html>
    水平居中设置-定宽块状元素

    当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

    这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

    html代码：

    <body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

    css代码：

    <style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

    也可以写成：

    margin-left:auto;
margin-right:auto;

    注意：元素的“上下 margin” 是可以随意设置的。

    任务

    试试看:这种水平居中的方法两个2个条件缺一不可，不信？

    你可以尝试把例子中的 200px 删除，还它是否还可以居中显示。

     
    因为DIV块元素本身就没有宽度，高度，它是个容器，可以无限放大，无限缩小。因为，如果没有宽度，那么居中就没有任何意义楼。
     
    水平居中分为：块状元素和行内元素居中两种，行内元素用text-align:center;块状元素用:margin:0 auto;
     

    三、水平居中总结-不定宽块状元素方法（一）

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定宽块状元素水平居中</title>
 6 <style>
 7 table{
 8     margin:0 auto;
 9 }
10 
11 /*下面是任务区代码*/
12 .wrap{
13     background:#ccc;
14 }
15 </style>
16 </head>
17 
18 <body>
19 <div>
20 <table>
21   <tbody>
22     <tr><td>
23     <ul>
24         <li>我是第一行文本</li>
25         <li>我是第二行文本</li>
26         <li>我是第三行文本</li>
27     </ul>
28     </td></tr>
29   </tbody>
30 </table>
31 </div>
32 
33 <div class="wrap">
34   设置我所在的div容器水平居中  
35 </div>
36 </body>
37 </html>
    水平居中总结-不定宽块状元素方法（一）

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，

    所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

    不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

    1. 加入 table 标签
    2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
    3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

    我们来讲一下第一种方法：

    为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），

    因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

    第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

    举例如下：

    html代码：

    <div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

    css代码：

    <style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

    任务

    来试试：补充代码实现右侧中的 class 为 wrap 的 div 水平居中显示（要注意是这个 div元素 居中，而不是里面的文本居中啊）。

    四、水平居中总结-不定宽块状元素方法（二）

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

    除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

    第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

    html代码：

    <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>

    css代码：

    <style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

    这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

     

    五、水平居中总结-不定宽块状元素方法（三）

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定宽块状元素水平居中</title>
 6 <style>
 7 .container{
 8     float:left;
 9     position:relative;
10     left:50%
11 }
12 
13 .container ul{
14     list-style:none;
15     margin:0;
16     padding:0;
17     
18     position:relative;
19     left:-50%;
20 }
21 .container li{float:left;display:inline;margin-right:8px;}
22 
23 
24 /*下面是代码任务区*/
25 
26 .wrap-center{
27     background:#ccc;
28     
29     
30 }
31 </style>
32 </head>
33 
34 <body>
35 <div class="container">
36     <ul>
37         <li><a href="#">1</a></li>
38         <li><a href="#">2</a></li>
39         <li><a href="#">3</a></li>
40     </ul>
41 </div>
42 
43 <!--下面是代码任务区-->
44 <div class="wrap">
45     <div class="wrap-center">我们来学习一下这种方法。</div>
46 </div>
47 </body>
48 </html>
    水平居中总结-不定宽块状元素方法（三）

    除了前两节讲到的插入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层的居中。

    代码如下：

    <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>

    css代码：

    <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;}
</style>

    这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

    任务

    来试试：添加代码为任务区中的 class 为 wrap-center 的div设置水平居中。

    这里面很重要的一个点就是父元素设置了float，float中有一个很重要的特性——“设置了float的元素，会生成块级框”；步骤如下：

    1. 父元素position: relative; left: 50%;——父元素的左边线与屏幕的中心线对齐

    2. 父元素float——使得父元素生成了块级框，也就是使得父元素的宽度 = 子元素的宽度，如果没有float，则父元素的宽度还是屏幕的宽度

    3. ·子元素position:relative; left:-50%；注意：left是相对于父元素的宽度进行偏移的，而此时父元素的宽度=子元素的宽度；实现居中
     

     

    /*text-align:center(文本居中)*/

    /*list-style:none(消除li圆点)
     
     
    margin:0;padding:0（消除文本与div边框之间的间隙）
     
    display:inline（变成行内元素，也就是把ul文本列变成行。另外从border来看未设置inline之前宽度是无限的，设置后宽度变为随文本宽度）*/

    /*margin-right:8px（设置li文本之间的间隔） display:inline（变成行内元素，也就是把li文本列变成行*/
     
     
    没看懂
  • 相关阅读:
    golang删除数组某个元素
    golang用通道实现信号量，控制并发个数
    什么是ScaleIO中的forwards rebuild和backwards rebuild?
    SQL Server中的database checkpoint
    如何将thick provision lazy zeroed的VMDK文件转换为thick provision eager zeroed?
    LoadTestAgentResultsLateException in VS2010
    SQL Server Instance无法启动了, 因为TempDB所在的分区没有了, 怎么办?
    VMware vCenter中, 如何辩认虚机上Raw Device Mapping过了的一块物理磁盘?
    SQL Server AlwaysOn Setup Step-By-Step Guide
    TPC-E在populate测试Database时需要注意的一些事项
  • 原文地址：https://www.cnblogs.com/guxinglang/p/6816037.html
Copyright © 2011-2022 走看看