外面一个div, 里面是一张大小不固定的图片, 或者span,div都行, 要实现里面元素水平垂直居中对齐

其实有很多实现的方法, 比如用js去计算每一个子元素的高度, 通过js去动态设置magin值, 不过这有点麻烦

今天分享一种用css实现的水平垂直居中对齐

看代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            height: 300px;

            width: 300px;

            margin-top: 80px;

            background-color: #ccc;

            text-align: center;

        }

        .box:after {

            content: "";

            display: inline-block;

            width: 0;

            height: 100%;

            vertical-align: middle;

        }

        .img {

            display: inline-block; /*如果是图片就不用写着一条, 如果不是图片必须加上*/

            vertical-align: middle;

            height: 100px;

            width: 100px;

            background-color: #f66;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="img"></div>

    </div>

</body>

</html>

效果如下

子元素的大小可以随意调整, 都是居中显示的

div里面的图片垂直居中的更多相关文章

  1. 浮动div中的图片垂直居中

    table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description&q ...

  2. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  4. div图片垂直居中

    div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸 ...

  5. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  6. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  7. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  8. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  9. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

随机推荐

  1. css里面如何设置body背景图片满屏

    @{    Layout = null;    ViewBag.Title = "Login Page";} <!DOCTYPE html> <html>& ...

  2. 使用域账号统一管理cisco网络设备

    1.思科设备和微软系统整合的背景: 公司内部有一定数量的客户端,为了实现统一化,在管理内部部署了域架构,这样可以通过组策略对客户端进行批量化管理,提高了管理的效率. 同样公司内部有一定数量的网络设备( ...

  3. 【项目记录】-路灯监测 gmap.net

    需求 2016年5月,客户要求在地图上显示路灯及数据,分析数据生成报表,以便查看分析路灯情况. 选型 国外项目就不考虑国内的地图了,开始想使用google的web地图,考虑到地图上标记物过多影响性能及 ...

  4. java多线程编程——锁优化

    并发环境下进行编程时,需要使用锁机制来同步多线程间的操作,保证共享资源的互斥访问.加锁会带来性能上的损坏,似乎是众所周知的事情.然而,加锁本身不会带来多少的性能消耗,性能主要是在线程的获取锁的过程.如 ...

  5. Egret学习笔记 (Egret打飞机-8.敌机和主角飞机发射子弹)

    经过前面几章的准备,我们差不多已经具备了一个基本的框架,这一章我们就开始添砖加瓦了. 敌机定时发射一个子弹,子弹的方向是从上到下,但是发射子弹的代码应该放在哪儿呢? 从面向对象编程的思想来说,子弹是敌 ...

  6. QWebSocketServer

    QWebSocketServer 服务端 Public Types Public Function QWebSocketServer(const QString &serverName, Ss ...

  7. 概括一下nodejs

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js是事件驱动,非阻塞I/O的.所以它再处理高并发,I/O密集的场景下性能优势明显,如web. 对比 ...

  8. 计蒜客 无脑博士 bfs

    题目链接无脑博士的试管们 思路:直接模拟倒水过程即可,但是需要记忆判断当前的情况是否已经处理过.dfs和bfs都ok AC代码 #include <cstdio> #include < ...

  9. 情景linux—不曾了解的cat用法

    情景 cat是linux命令中最为基础的命令之一,它是"concatenate"(连接)的简写,作用概述是concatenate and print files,即:连接和查看文件 ...

  10. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...