让vertical-align: middle属性支持所有的浏览器

最新推荐文章于 2023-11-05 23:47:24 发布

gwpJava

最新推荐文章于 2023-11-05 23:47:24 发布

阅读量1.3k

点赞数

分类专栏： Html/Css/JavaScript 文章标签： vertical-align middl

本文链接：https://blog.csdn.net/gwpJava/article/details/11141937

版权

Html/Css/JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

第一种方法：通过一个空白图片可以达到垂直居中的效果。【建议使用】

代码如下

复制代码

<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>

个人觉得vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。

第二种方法：往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标签的左边写一些提示性的文字但是这些文字默认不是垂直居中而是垂直居底按照上面的方法可以将这些文字设为垂直居中

gwpJava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让vertical-align: middle属性支持所有的浏览器

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。第一种方法：通过一个空白图片可以达到垂直居中的效果。【建议使用】代码如下复制代码图片居中 /*定义垂直居中*/#test * { margin: 0px; padding: 0px; vertical-align
复制链接

扫一扫

专栏目录