让vertical-align: middle属性支持所有的浏览器
2013-09-05 15:18
435 查看
垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。
第一种方法:通过一个空白图片可以达到垂直居中的效果。【建议使用】
个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。
第二种方法:往div里面加表格。
在表格里就很容易设置居中了。
经测试,这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。
这也可以解决我们一般会在textarea标签的左边写一些提示性的文字 但是这些文字默认不是垂直居中而是垂直居底 按照上面的方法可以将这些文字设为垂直居中
第一种方法:通过一个空白图片可以达到垂直居中的效果。【建议使用】
代码如下 | 复制代码 |
<html> <title>图片居中</title> <style> /*定义垂直居中*/ #test * { margin: 0px; padding: 0px; vertical-align: middle; } /*定义div大小,以及水平居中*/ #test { background: #fff000; width: 500px; height: 500px; text-align: center; } /*辅助图片高度填满div,宽度为0,所以看不到这个图片*/ #img { width: 0px; height: 100%; } </style> <body> <div id="test"> <!--辅助图片 --> <img alt="" src="" id="img"> <!--要居中的图片 --> <img alt="" src="skin/images/top/logo.jpg"> </div> </body> </html> |
第二种方法:往div里面加表格。
代码如下 | 复制代码 |
<html> <style> #a { background: #fff000; width: 500px; height: 500px; overflow: hidden; text-align: center; } </style> <body> <div id="a"> <table width="100%" height="100%"> <tr> <td align="center"> <img src="skin/images/top/logo.jpg" /> </td> </tr> </table> </div> </body> </html> |
经测试,这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。
这也可以解决我们一般会在textarea标签的左边写一些提示性的文字 但是这些文字默认不是垂直居中而是垂直居底 按照上面的方法可以将这些文字设为垂直居中
相关文章推荐
- 让 CSS 的 "vertical-align: middle" 属性支持 IE 6/7
- table支持vertical-align属性
- inline-block 导致元素下沉 解决方法添加vertical-align:middle属性
- 让所有浏览器都支持HTML5 placeholder属性
- Android微信内置浏览器 bootstrap vertical-align:middle 无效的问题
- div中的图片居中对齐 or vertical-align:middle 属性设置无效
- 几乎所有浏览器均 支持tabindex 属性,除了 Safari
- CSS属性:vertical-align:middle,设置为什么无效!
- vertical-align属性的一些理解与认识
- 让低版本浏览器支持input的placeholder属性(js方法)
- vertical-align: middle的用法
- Input输入框与图片对齐属性vertical-align:bottom
- destoon 6.0 手机站支持在所有浏览器访问
- Html导出Excel文件(兼容所有浏览器,支持设置文件名)
- js检测浏览器是否支持某属性
- line-height和vertical-align 属性的对比解析n
- 【H5学习】浏览器对CSS属性的支持
- IE低版本浏览器支持CSS3属性(圆角、阴影、渐变等)(CSS3 PIE)
- 让所有浏览器支持HTML5 video视频标签
- 如何知道浏览器所支持的属性和方法呢?