请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 682|回复: 14

css div居中大全,样式实例!

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-31 23:01:22 | 显示全部楼层 |阅读模式
center标签居中text文本是我学到的第一个居中内容的方法,之后又学会了margin:0 auto来居中整体布局,使页面整体居中,其实left:,top:,margin-top,margin-right,margin-left等等css属性都可以达到div居中的效果,那么一下是通过搜集整理的一些关于css div居中的实例,给大家分享!

css 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。

1.水平居中行内元素水平居中(文本,图片)给父层设置 text-align:center; 可以实现行内元素水平居中。
<!DOCTYPE HTML><html lang="en-US">
<head>   
<meta charset="UTF-8">   
<title></title>   
<style type="text/css">   
.center{text-align:center;}   
</style>
</head>
<body>   
<div class="center">        
<a href="http://www.google.com.hk/">谷歌搜索</a><br/><br/>      
<img src="cat.jpg" width="248" height="162" alt=""/>   
</div>
</body>
</html>
2、确定宽度块级元素水平居中
确定宽度的块级元素水平居中,常用的有 margin:0 auto; 相信很多开发人员都用的是这个,不过本人认为还有更好的写法:margin-left:auto;margin-right:auto; 因为 margin-top 和 margin-bottom 在重置 css 时就已经写了为 0 了。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .center{width:100px;height:100px;margin-left:auto;margin-right:auto;background:green;}
   </style>
</head>
<body>
    <div class="center"></div>
</body>
</html>
3、不确定宽度的块级元素水平居中

不确定宽度的块级元素有三种方法实现。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    ul{list-style:none;}
    table{margin-left:auto;margin-right:auto;}
    .demo li{float:left;display:inline;margin-right:5px;}
    .demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}
    .demo a:hover{background:white;color:#316ac5;}
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <ul class="demo">
                        <li><a href="#">1</a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    <ul class="demo">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    <ul class="demo">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。

这种方法很巧妙,但是增加了无语义标签,加深了标签的嵌套层数。

垂直居中
1、父层高度不确定的垂直居中(通过给父层设置相同的上下内边距实现。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .demo{width:500px;color:white;margin-bottom:10px;padding-top:20px;padding-bottom:20px;background:black;}    .content{width:200px;height:50px;background:red;}
    </style>
</head>
<body>
    <div class="demo">hello world</div>
    <div class="demo"><img src="cat.jpg" width="248" height="162" alt=""/></div>
    <div class="demo">
<div class="content">
</div>
</div>
</body>
</html>
2、父层高度确定的单行文本垂直居中(通过给父层设置行高来实现,行高和父层高度相同。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .demo{width:500px;color:white;background:black;height:100px;line-height:100px;}
   </style>
</head>
<body>
    <div class="demo">hello world</div>
</body>
</html>
3、父层高度确定的多行文本、图片、块级元素垂直居中
说到垂直居中,css 中有个用于垂直居中的属性 vertical-align,但只有在父层为 td 或者 th 时,这个属性才会生效,对于其他块级元素,例如 div、p 等,默认情况是不支持的。在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,但 ie6,7 并不支持,所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .wrapper{background:black;width:500px;color:white;height:100px;}
    .demo{width:200px;background:red;height:50px;}
   </style>
</head>
<body>
    <table>
        <tr>
            <td class="wrapper">
                hellow world<br/>
                hellow world<br/>
                hellow world<br/>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td class="wrapper">
                <img src="cat.jpg" alt=""/>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td class="wrapper">
                <div class="demo"></div>
            </td>
        </tr>
    </table>
</body>
</html>
table 可以很好的实现垂直居中效果,但是它添加了无语义标签,增加了嵌套深度。
div使用align实现内容居中
  • <!DOCTYPE html>
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta charset="utf-8" />
  • <title>align center小例</title>
  • </head>
  • <body>
  • <div><img src="image/logo2.gif" width="161" height="30"></div>
  • <!-- 未设置居中align="center" -->
  • <div align="center"><img src="image/logo1.gif" width="161" height="30"></div>
  • <!-- 对div设置 align="center" -->
  • <!--HTML注释说明:为了便于截图,将代码换行,但不影响效果 -->
  • </body>
  • </html>


css实现图片在div中居中的效果
利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中。

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title>   <style type="text/css">
div{
  width:180px;
  height:180px;
  border:1px solid #000;
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
div p{
  position:static;
  +position:absolute;
  top:50%;
}
div img{
  position:static;
  +position:relative;
  top:-50%;
  left:-50%;
}
</style>
</head><body> <div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br>
<div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>
</body></html>
总结:
两者本质区别
CSS布局居中:对框架设置水平居中(比如对DIV本身设置DIV水平居中于浏览器中)。
CSS内容居中:对盒子里的内容设置水平居中(比如DIV内放到图片、文字等内容)
应用目的  
CSS布局居中实现主体水平居中于浏览器;
CSS内容居中实现框架盒子内的内容居中。
拿DIV布局来说,前者对DIV框架盒子本身设置水平居中,后者对DIV里装的内容水平居中。


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

1

主题

1183

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2016-3-5 15:04:55 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

2

主题

1068

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2016-3-14 11:52:35 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

1

主题

1009

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-20 19:26:14 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

1

主题

1007

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2016-3-25 15:53:51 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

1

主题

1183

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2016-3-25 22:01:01 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

2

主题

1166

帖子

156

积分

注册会员

Rank: 2

积分
156
发表于 2016-3-27 22:49:32 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

1

主题

1009

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-28 14:26:00 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

1

主题

1007

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2016-5-21 15:29:52 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

2

主题

1103

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2016-6-21 20:50:25 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-3-21 13:37 , Processed in 0.244837 second(s), 26 queries .

快速回复 返回顶部 返回列表