码迷，mamicode.com
首页 > Web开发 > 详细

HTML+CSS笔记 CSS中级 一些小技巧

时间：2016-02-10 10:56:13      阅读：351      评论：0      收藏：0      [点我收藏+]

标签：

水平居中

行内元素的水平居中

在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

语法:
  1. <body>
  2.   <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
  3. </body>
  1. <style>
  2.   div.txtCenter{
  3.     text-align:center;
  4.   }
  5. </style>


块状元素

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

定宽块状元素水平居中

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
语法:
  1. <body>
  2.   <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
  3. </body>
  1. <style>
  2. div{
  3.     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/   
  4.     width:500px;/*定宽*/
  5.     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
  6. }
  8. </style>
注意：元素的“上下 margin” 是可以随意设置的。

不定宽元素水平居中

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
  1. 加入 table 标签
  2. 设置 display;inline 方法
  3. 设置 position:relative 和 left:50%;

第一种加入table标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）
  1. <div>
  2. <table>
  3.   <tbody>
  4.     <tr><td>
  5.     <ul>
  6.         <li><a href="#">1</a></li>
  7.         <li><a href="#">2</a></li>
  8.         <li><a href="#">3</a></li>
  9.     </ul>
  10.     </td></tr>
  11.   </tbody>
  12. </table>
  13. </div>
  1. <style>
  2. table{
  3.     margin:0 auto;
  4. }
  6. ul{list-style:none;margin:0;padding:0;}
  7. li{float:left;display:inline;margin-right:8px;}
  8. </style>

第二种方法display:inline

改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果
  1. <body>
  2. <div class="container">
  3.     <ul>
  4.         <li><a href="#">1</a></li>
  5.         <li><a href="#">2</a></li>
  6.         <li><a href="#">3</a></li>
  7.     </ul>
  8. </div>
  9. </body>
  1. <style>
  2. .container{
  3.     text-align:center;
  4. }
  5. .container ul{
  6.     list-style:none;
  7.     margin:0;
  8.     padding:0;
  9.     display:inline;
  10. }
  11. .container li{
  12.     margin-right:8px;
  13.     display:inline;
  14. }
  15. </style>
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

第三种设置position:relative和left:50%

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中
  1. <body>
  2. <div class="container">
  3.     <ul>
  4.         <li><a href="#">1</a></li>
  5.         <li><a href="#">2</a></li>
  6.         <li><a href="#">3</a></li>
  7.     </ul>
  8. </div>
  9. </body>
  1. <style>
  2. .container{
  3.     float:left;
  4.     position:relative;
  5.     left:50%
  6. }
  8. .container ul{
  9.     list-style:none;
  10.     margin:0;
  11.     padding:0;
  12.     
  13.     position:relative;
  14.     left:-50%;
  15. }
  16. .container li{float:left;display:inline;margin-right:8px;}
  17. </style>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

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


垂直居中

父元素高度确定的单行文本的垂直居中

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
语法:
  1. <div class="container">
  2.     hi,imooc!
  3. </div>
  1. <style>
  2. .container{
  3.     height:100px;
  4.     line-height:100px;
  5.     background:#999;
  6. }
  7. </style>

父元素高度确定的多行文本的垂直居中

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了
  1. <body>
  2. <table><tbody><tr><td class="wrap">
  3. <div>
  4.     <p>看我是否可以居中。</p>
  5.     <p>看我是否可以居中。</p>
  6.     <p>看我是否可以居中。</p>
  7.     <p>看我是否可以居中。</p>
  8.     <p>看我是否可以居中。</p>
  9. </div>
  10. </td></tr></tbody></table>
  11. </body>
  1. table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式
  1. <div class="container">
  2.     <div>
  3.         <p>看我是否可以居中。</p>
  4.         <p>看我是否可以居中。</p>
  5.         <p>看我是否可以居中。</p>
  6.         <p>看我是否可以居中。</p>
  7.         <p>看我是否可以居中。</p>
  8.     </div>
  9. </div>

  1. <style>
  2. .container{
  3.     height:300px;
  4.     background:#ccc;
  5.     display:table-cell;/*IE8以上及Chrome、Firefox*/
  6.     vertical-align:middle;/*IE8以上及Chrome、Firefox*/
  7. }
  8. </style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素

  1. <div class="container">
  2.     <a href="#" title="">进入课程请单击这里</a>
  3. </div>
小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了
  1. <style>
  2. .container a{
  3.     position:absolute;
  4.     width:200px;
  5.     background:#ccc;
  6. }
  7. </style>













HTML+CSS笔记 CSS中级 一些小技巧

标签：

原文地址：http://www.cnblogs.com/echorep/p/5185862.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！