zoukankan      html  css  js  c++  java
  • 大小不确定图片垂直居中

    如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。

         如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。

         发现了如下一个方法,做个收藏。

    样式部分:


    .middle-out{

            600px; 

           height: 385px; 

           position: relative; 

           display: table-cell;

           vertical-align: middle;

           text-align:center;

           border: 1px solid #f00;

     }

    .middle-in{

           position: static;

           *position:absolute;

           top:50%;

     }

    .middle-out .middle-in  img{

           position:static;

           *position:relative;

           top:-50%;

           left:-50%;

     }

    HTML部分:

    <div class="middle-out">

      <div class="middle-in">

              <img src="" />

         </div>

    </div>

  • 相关阅读:
    Python 虚拟环境 virtualenv
    Python
    开发语言之---Java
    LINUX系统
    关系型数据库之MySQL
    开发语言之---Python
    框架之---Django
    递归/面向过程编程
    迭代器/生成器函数及协程函数的编写和使用
    装饰器的编写及使用
  • 原文地址:https://www.cnblogs.com/bxzz/p/4192012.html
Copyright © 2011-2022 走看看