水平垂直居中图片及文字(兼容IE6+)实例

时间：2022-09-03 11:24:09

直接看代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>水平垂直居中</title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        * { margin: 0; padding: 0; font-size: 12px; color: #FFF; }

        .container {

            display: table; /*主要代码*/

            *position: relative;  /*for ie67*/

            background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;

        }

        .content {

            vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/

            *position: absolute; *top: 50%; *left: 50%; /*for ie67*/

        }

        .center {

            display: inline-block; /*主要代码*/

            *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/

            padding: 10px; border: 1px solid #fff;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">

        <div class="center">

            <img src="https://static.cnblogs.com/images/adminlogo.gif" /><br/>

            居中居中居中居中居中居中居中居中居中.....

        </div>

    </div>

</div>

</body>

</html>

水平垂直居中图片及文字(兼容IE6+)实例的更多相关文章

  1. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

  2. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  3. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  5. 图文-水平垂直居中兼容ie6&plus;

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  7. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  8. IE6&plus;未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  9. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

随机推荐

  1. android 自定义控件——（三）水平线、虚线

    ----------------------------------View虚线或者直线(源代码下有属性解释)--------------------------------------------- ...

  2. Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 &period;docx

    Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx 1.1. 数据库的类型,网状,层次,树形数据库,kv数据库.oodb2 1.2. Er模型2 1.3. Sql2 ...

  3. Swift - 使用CAKeyframeAnimation实现关键帧动画

    1,CAKeyframeAnimation介绍 CAKeyframeAnimation可以实现关键帧动画,这个类可以实现某一属性按照一串的数值进行动画,就像是一帧一帧的制作出来一样.   2,使用样例 ...

  4. 等号赋值与memcpy的效率问题

    转自:http://www.aiuxian.com/article/p-1309055.html 偶尔看到一个说法,说,小内存的拷贝,使用等号直接赋值比memcpy快得多.结合自己搜集到的资料,整理成 ...

  5. 运行在VMware上的Linux虚拟机如何使用NAT模式连接物理机的外部网络

    在VMware Workstation中,默认有3个虚拟交换机,分别是VMnet0(使用桥接网络).VMnet1(仅主机网络)和VMnet8(NAT网络). 首先说一下为什么要用NAT模式,如果你的物 ...

  6. &lbrack;tp3&period;2&period;1&rsqb;开启URL&lpar;重写模式&rpar;&comma;省略URL中的index&period;php

    重写模式(省略url中的index.php) 在apache配置文件httpd.conf中,查找 1.mod_rewrite.so, 启动此模块 2.AllowOverride , 值= All 3. ...

  7. JavaScript高级---组合模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  8. JFreeChart画折线图

    请见Github博客: http://wuxichen.github.io/Myblog/htmlcss/2014/09/01/JFreechartLinechart.html

  9. new Date&lpar;&rpar;传参的浏览器兼容性

    测试以下是在IE9的测试情况 可以看到IE9不支持new Date('2018-1-2')和new Date('123456'),但是支持new Date('2018-01-02').new Date ...

  10. MQTT安装

    技术链接:http://docs.emqtt.cn/zh_CN/latest/getstarted.htmlDashboard控制台:http://10.74.20.43:18083/#/ 默认登录用 ...

相关文章