外面一个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. Vue的生命周期

    1.1.实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周 ...

  2. 如何使用 Bootstrap 搭建更合理的 HTML 结构

    前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性.但是很多人在使用 Bootstrap 时只是依照文档盲目的复制黏贴,并没有仔细考虑每个类的用处,也 ...

  3. 《深入理解Java虚拟机》——垃圾收集器与内存分配策略

    GC需要完成: 哪些内存需要回收 什么时候回收 如何回收 如何确定对象不再使用 引用计数算法 给对象添加一个引用计数器,当有一个地方引用它时,计数器值进行加1操作:当引用失效时,计数器值进行减1操作: ...

  4. Java实现单链表的快速排序和归并排序

    本文描述了LeetCode 148题 sort-list 的解法. 题目描述如下: Sort a linked list in O(n log n) time using constant space ...

  5. JQuery 验证框架

      设计完美,可扩展性好,以后就用他了. http://docs.jquery.com/Plugins/Validation /**//** * @author ming */ $(document) ...

  6. Java经典编程题50道之十五

    输入三个整数x,y,z,请把这三个数由小到大输出. public class Example15 {    public static void main(String[] args) {       ...

  7. Netbeans文件被误删怎么办？

    辛辛苦苦写的代码突然不见了,上午还是有的,哪去了?怎么办? 破解办法: 1,良好的版本管理工具(git||svn)使用习惯,代码每天上传更新,技术文件有丢失,也就一天的. 2,Netbeans提供的备 ...

  8. 简单了解下OSI七层模型的作用以及常见网络协议含义和所用端口

    OSI七层模型及每层的作用 包括:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层物理层用来建立.维护.断开物理连接数据链路层建立逻辑链接.进行硬件地址寻址.差错校验等功能网络层进行逻辑地址 ...

  9. 剑指offer第八天

    32.把数组排成最小的数 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323 ...

  10. Hadoop1.x原理

    将这种单机的工作进行分拆,变成协同工作的集群,这就是分布式计算框架设计.使得计算机硬件类似于应用程序中资源池的资源,使用者无需关心资源的分配情况,从而最大化了硬件资源的使用价值.分布式计算也是如此,具 ...