zoukankan      html  css  js  c++  java
  • 图片垂直水平居中

    前端布局,垂直水平居中是经常遇到的一个场景。水平居中较为容易,垂直居中则需变通处理,特别是图片的居中。

    • 行内元素居中, 包括文本,图片,表单元素等,display属性为inline的元素

    水平居中原理: text-align:center 实现水平居中

    垂直居中原理:利用 line-height 等于 height

    • 块元素居中,display属性为block的元素

    水平居中原理:利用 margin:0 auto 实现

    垂直居中原理:利用 vertical-align 实现垂直居中,决定行高的是行内最高的元素的值

    下面贴出的代码为块元素居中代码,行内元素比较简单不做演示。

    css:

    .box {  
        /*设置水平居中*/ 
        text-align:center; 
        500px; 
        height:500px; 
        border: 1px solid #eee; 
    } 
    .box span{
        height:100%;
        display:inline-block;
        vertical-align:middle;
    }
    .box img { 
        /*设置图片垂直居中*/ 
        vertical-align:middle;
        80%;
        height:80%; 
    } 

    html布局:

    <div class="box" > 
        <span></span>
        <img src="images/10/7.png"> 
    </div>
    

    效果图片:

      

  • 相关阅读:
    python之字典方法
    python之字符串方法
    python strip()方法使用
    Airtest自动化测试工具介绍
    selenium 环境配置
    一个自定义线程池的小Demo
    简单工厂模式
    BootStrap入门_创建第一个例子
    MongoDB的索引
    MongoDB的查询
  • 原文地址:https://www.cnblogs.com/jinxiudaxin/p/6516044.html
Copyright © 2011-2022 走看看