原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

评论

分享:

支付宝

微信