水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。
这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:
HTML Markup
- <div class="center">
- <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" />
- </div>
- <div class="center">
- <div class="text">我就一行文字</div>
- </div>
- <div class="center">
- <div class="text">
- 我是多行文字<br />
- 我是多行文字
- </div>
- </div>
复制代码
CSS Code
- .center {
- width: 300px;
- height: 200px;
- padding: 10px;
- border: 1px solid #ccc;
- margin: 20px auto;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
- -webkit-box-align: center;
- display: -moz-box;
- -moz-box-orient: horizontal;
- -moz-box-pack: center;
- -moz-box-align: center;
- display: -o-box;
- -o-box-orient: horizontal;
- -o-box-pack: center;
- -o-box-align: center;
- display: -ms-box;
- -ms-box-orient: horizontal;
- -ms-box-pack: center;
- -ms-box-align: center;
- display: box;
- box-orient: horizontal;
- box-pack: center;
- box-align: center;
- }
- .center img,
- .text {
- border: 1px solid #dedede;
- padding: 2px;
- }
复制代码
时间: 2024-10-14 04:47:25