Home > Web Front-end > CSS Tutorial > How to achieve vertical centering of images of unknown height with CSS (code attached)

How to achieve vertical centering of images of unknown height with CSS (code attached)

不言
Release: 2018-11-12 15:32:57
forward
2586 people have browsed it

本篇文章给大家带来的内容是关于CSS如何实现未知高度图像的垂直居中(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

How to achieve vertical centering of images of unknown height with CSS (code attached)

nbsp;html>
  
    
    <meta>  
    <meta>  
    <title> CSS垂直居中</title>  
    <style>  
      .container{  
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
       
    </style>  
    
    
    <h1>垂直居中(table)</h1>  
    <div>
        <table>
            <tr>
               <td>
                  <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
               </td>
           </tr>
       </table> 
   </div>
     
    
Copy after login

好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法

背景图片法

How to achieve vertical centering of images of unknown height with CSS (code attached)

nbsp;html>


<title> CSS垂直居中</title>
<style>
.container {
  width:500px;
  height:500px;
  line-height:500px;
  background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;
  border:1px solid #f00;
  text-align: center;
}
 
</style>
 


<h1>垂直居中</h1>
<div>
    
</div>

Copy after login

CSS表达式法

  
    
    <meta>  
    <meta>  
    <title>司徒正美 CSS垂直居中</title>  
    <style>  
      .container{  
        /*IE8与标准游览器垂直对齐*/
        display: table-cell;
        vertical-align:middle; 
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      .container img{  
        display:block;/*让其具备盒子模型*/
        margin:0 auto;  
        text-align:center;
        margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
      }  
    </style>  
    
    
    <h1>垂直居中(CSS表达式)</h1>  
    <div>  
      <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >  
    </div>  
    
Copy after login

绝对定位法

nbsp;html>

  
    <meta>
    <meta>
    <title>司徒正美 CSS垂直居中</title>
    <style>
      div {
       /*IE8与标准游览器垂直对齐*/
        display:table-cell;
        vertical-align:middle;
        overflow:hidden;
        position:relative;
        text-align:center;
        width:500px;/*装饰*/
        height:500px;
        border:1px solid #ccc;
        background:#B9D6FF;
      }
      div p {
        +position:absolute;
        top:50%
      }
      img {
        +position:relative;
        top:-50%;
        left:-50%;
      }
  
    </style>
  
  
    <h1>垂直居中(绝对定位)</h1>
    <div>
      <p>
        <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
      </p>
    </div>
  
Copy after login

display:inline-block法

nbsp;html>

  
    <meta>
    <meta>
    <title>司徒正美 CSS垂直居中</title>
    <style>
      div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }
 
    </style>
    <!--[if IE]>
<style type="text/css">
i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
img {
    vertical-align:middle
    }
</style>
<![endif]-->
    
  
  
    <h1>垂直居中(inline-block法)</h1>
    <div>
      <i></i>
      <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
    </div>
  
Copy after login

writing-mode法

nbsp;html>

  
    <meta>
    <meta>
    <title> CSS垂直居中</title>
    <style>
      div{
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
        background:#B9D6FF;
        border:1px solid #f00;
      }
      div span{
        height:100%\9;
        writing-mode:tb-rl\9;
      }
      div img{
        vertical-align:middle
      }
    </style>
  
  
    <h1>垂直居中(writing-mode法)</h1>
    <div>
      <span>
        <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
      </span>
    </div>
  
Copy after login

How to achieve vertical centering of images of unknown height with CSS (code attached)

The above is the detailed content of How to achieve vertical centering of images of unknown height with CSS (code attached). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template