当前阅读教程:CSS入门到精通 > 垂直居中对齐 - 使用 padding | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 左右对齐 - 使用 float 方式 | 下一篇: 垂直居中 - 使用 line-height |
实例CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding: 代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>垂直居中对齐 - 使用 padding</title> <!--定义内部样式--> <style> .center { padding: 50px 0;/*内边距:上下50px,左右0*/ border: 3px solid green;/*边框*/ } </style> </head> <body> <h2>垂直居中</h2> <p>以上实例,我们使用 padding 属性实现元素的垂直居中:</p> <div> <p>我是垂直居中的。</p> </div> </body> </html> 效果图实例:水平和垂直都居中代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>水平和垂直都居中</title> <!--定义内部样式--> <style> .center { padding: 30px 0;/*内边距:上下50px,左右0*/ border: 3px solid green;/*边框*/ text-align: center;/*水平居中*/ } </style> </head> <body> <h2>水平和垂直方向都居中</h2> <p>以下实例,我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p> <div> <p>我是水平和垂直都居中的。</p> </div> </body> </html> 效果图 |
|
上一篇: 左右对齐 - 使用 float 方式 | 下一篇: 垂直居中 - 使用 line-height |