迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

垂直居中方法总结

作者:嫣然 最近更新:2022/12/04 浏览次数:

之前总结了水平居中的方法,现在将垂直居中总结了一下分享给大家。

(1) 父元素高度不确定的文本,图片,块级元素的垂直居中

父元素高度不确定的文本,图片,块级元素的垂直居中是通过给父级元素设置相同上下边距实现的。

<style>
.wrap{background:#ccc;width:500px;color:red;margin-bottom:10px;padding-top:20px;padding-bottom:20px;}
.test{width:200px;height:50px;background:red;}
</style>
<div class="wrap">hello word</div>
<div class="wrap"><img src="logo.png" height="129" width="238" alt="" /></div>
<div class="wrap"><div class="test"></div></div>

效果如下:

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

父级元素高度确定的单行文本的垂直居中,是通过给父元素设置line-height来设置的,line-height值和父元素的高度值相同

<style>
.wrap{background:#ccc;width:500px;color:red;height:100px;line-height:100px;}
</style>
<div class="wrap">hello word</div>

(3)父元素高度确定的文本,图片,块级元素的垂直居中

父元素高度确定的文本,图片,块级元素的垂直居中有两种方法:

方法一:说到垂直居中,在表格table中用到的垂直居中属性vertical-align:middle,但是只有父级元素为th或td时,这个vertical-align:middle属性才会生效,对于其他的块级元素div,p等是不起作用的。在火狐和ie8,可以设置display:table-cell,激活vertical-align:middle属性,但是在ie6,ie7下不支持vertical-align,所以这种办法没有跨浏览器兼容,但是我们可以用最笨的方法实现兼容,既然ie6,ie7不支持块级元素设置为display:table-cell来模拟表格,那么我们直接用表格布局好了

<style>
.wrap{background:#ccc;width:500px;color:red;height:100px;}
.test{width:100px;height:50px;background:red;}
</style>
<!-- 文本 -->
<table>
         <tbody>
                   <tr>
                            <td class="wrap">
                                     hello word<br>
                                     hello word<br>
                                     hello word<br>
                            </td>
                   </tr>
         </tbody>
</table>
<!-- 图片 -->
<table>
         <tbody>
                   <tr>
                            <td class="wrap">
                                     <img src="logo.png" height="50"  alt="" />
                            </td>
                   </tr>
         </tbody>
</table>
<!-- 块级元素 -->
<table>
         <tbody>
                   <tr>
                            <td class="wrap">
                                      <div class="test"></div>
                            </td>
                   </tr>
         </tbody>
</table>

因为td默认情况下就隐式的设置了vertical-align:middle;所以在wrap就不用设置了,这种方法虽然很好的解决了浏览器对的兼容性问题,但是添加了无语义标签,增加了嵌套。

方法二:对支持display:table-cell的浏览器用display:table-cell和vertical-align:middle;来实现居中,对不支持display:table-cell的ie6,ie7使用特定hack实现垂直居中。

<style>
.mb10{margin-top:10px;}
.wrap{background:#ccc;width:500px;height:100px;display:table-cell;color:red;vertical-align:middle;*position: relative;}
.verticalWrap{*position:absolute;top:50%;}
.vertical{*position: relative;top:-50%;}
.test{width:100px;height:50px;background:red;}
</style>
<div class="mb10">
         <div class="wrap">
                   <div class="verticalWrap">
                            <div class="vertical">
                                     hello word <br>
                                     hello word <br>
                                     hello word
                            </div>
                   </div>
         </div>
</div>
<div class="mb10">
         <div class="wrap">
                   <div class="verticalWrap">
                            <div class="vertical">
                                     <img src="logo.png" height="50"  alt="" />
                            </div>
                   </div>
         </div>
</div>
<div class="mb10">
         <div class="wrap">
                   <div class="verticalWrap">
                            <div class="vertical">
                                     <div class="test"></div>
                            </div>
                   </div>
         </div>
</div>

以上就是我总结的垂直居中的几种方式,希望本文对大家有所帮助

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

[使ie6,7,8兼容background-size属性]

发布时间:2016/08/31 浏览次数:1514 分类:WEB前端

低版本的ie根本不兼容background-size:cover;这个css3属性。需要用到backgroundsize.min.htc这个插件来兼容。最近写项目,要用到大图做整个背景,无论大屏小屏都要展示完全,小屏不能只展示一部

CSS水平居中大全

发布时间:2016/08/23 浏览次数:189 分类:CSS

css的居中有很多情况,不同的情况方法不同,下面总结一下平常用到的居中方法

前端干货分享

发布时间:2016/06/21 浏览次数:316 分类:WEB前端

终于有时间总结一下了,这个给大家分享一下我收藏的前端干货的网站,希望对网友有用.

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便