外面一个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. POJ 3608 Bridge Across Islands [旋转卡壳]

    Bridge Across Islands Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10455   Accepted: ...

  2. 《CSS核心技术详解》

    前言 看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理. 在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性:后来才发现自己小看了CSS,对CSS的了解实在是 ...

  3. sql的升阶

    前言:基本数据库操作根本无法满足实际的需要,需要引入更多的操作. 触发器-隐式的,主动的,更新数据表中的信息.带有inserted和deleted两个临时表,代表新操作和旧操作. 它是一种特殊的存储过 ...

  4. mysql 军规 （转载）

    导语 来自一线的实战经验 每一条军规背后都是血淋淋教训 不要华丽,只要实用 若有一条让你受益,慰矣 主要针对数据库开发人员 总是在灾难发生后,才想起容灾的重要性 总是在吃过亏后,才记得曾经有人提醒过 ...

  5. JSON工具类

    import java.sql.Timestamp; import java.util.Collection; import java.util.Date; import org.soul.util. ...

  6. （二）异步方法BeginInvoke和EndInvoke

    .Net framework可以让你异步调用任何方法,你可以定义一个与你要调用的方法的签名相同的委托.公共语言运行时将自动为该委托定义与签名相同的BeginInvok和EndInvoke方法. Beg ...

  7. mac攻略(2) -- apache站点配置

    [http://www.cnblogs.com/redirect/p/6112164.html] Mac OS X 中默认有两个目录可以直接运行你的 Web 程序, 一个是系统级的 Web 根目录:/ ...

  8. elasticsearch2.3.3安装

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 作者原来搭建的环境是0.95版本 现在升级到2.3.3版本, ...

  9. NDK配置debug环境时：Error:FAILURE: Build failed with an exception

    Error:FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:ex ...

  10. C#委托与事件--简单笔记

    委托 简单记录点东西 适合似懂非懂的朋友看看 委托类型用来定义和响应应用程序中的回调. 借此可以设计各种有面向对象特性的代码模式.下面要说的事件在我看来就是委托的一种实现,再深一步讲,利用委托加事件, ...