原创

CSS垂直居中vertical-align: middle无效解决方案

css样式中实现内容垂直居中vertical-align: middle属性,但是一般情况下是没有效果的,下面为大家讲解一下具体的解决方法。对于html中div标签水平居中很容易,设置css样式text-align:center即可,但是垂直居中vertical-align:middle此属性普通设置是无效的。

方式一:在html中div标签增加table表格,html代码如下:

<html>
    <style>
#yoodb {
    background: #333;
    width: 600px;
    height: 600px;
    overflow: hidden;
    text-align: center;
}
</style>
    <body>
<div id="yoodb">
    <table width="100%" height="100%">
<tr>
    <td align="center">
<img src="http://www.yoodb.com/front/images/logo.png" />
    </td>
</tr>
    </table>
</div>
    </body>
</html>

方式二:图片居中通过空白图片实现垂直居中效果,html代码如下:

<html>
 <title>欢迎收藏本站</title>
 <style>
#yoodb * {
 margin: 0px;
 padding: 0px;
 vertical-align: middle;
}

#yoodb {
 background: #fff000;
 width: 500px;
 height: 500px;
 text-align: center;
}

#img {
 width: 0px;
 height: 100%;
}
</style>
 <body>
  <div id="yoodb">
   <img alt="" src="" id="img">
   <!--要居中的图片 -->
    <img alt="" src="http://www.yoodb.com/front/images/logo.png">
   </div>
 </body>
</html>

注意:上述两种方式不会出现浏览器不兼容等问题,建议使用css样式overflow:hidden属性,当图片超出可视化时隐藏超出部分。

~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信