本文转自：http://qsfwy.iteye.com/blog/250206

在div 中让 文字或图片居中,请参考以下代码1：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>居中</title>

</head>

<style type="text/css">

.imageWrap{ width:200px; height:200px; text-align:center; border:#999 solid 1px; display:table-cell; vertical-align:middle; position:relative;}

.imageWrap .outer{ +position:absolute; +top:50%;+left:0}

.imageWrap .inner{ +position:relative; +top:-50%;+left:0}

.imageWrap img{ display:block; margin:0 auto}

</style>

<body>

<div class="imageWrap">

<div class="outer">

<div class="inner">

<img src="http://www.baidu.com/img/baidu.gif"/>

<a href="#">百度</a>

</div>

</div>

</div>

</body>

</html>

参考代码2：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<style type="text/css">

<!--

.frame{

    float:left;

    margin:2px;

}

.outer {

    height: 250px;

    width: 240px;

    overflow: hidden;

    background:gold;

    position: static !important;

    position: relative;

    display: table !important;

}

#middle { /* for explorer only*/

    position: absolute;

    top: 50%;

}

#middle[id] {

    display: table-cell;

    vertical-align: middle;

    position: static;

}

#inner { /* for explorer only */

    position: relative;

    top: -50%;

    width: 100%;

    margin: 0 auto;

    text-align:center

}

</style>

</head>

<body>

<div class="frame">

    <div class="outer">

        <div id="middle">

            <div id="inner"><img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /></div>

        </div>

    </div>

</div>

<div class="frame">

    <div class="outer">

        <div id="middle">

            <div id="inner">

                <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /><br /><br />

                <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />

            </div>

        </div>

    </div>

</div>

<div class="frame">

    <div class="outer">

        <div id="middle">

            <div id="inner">图片与文本内容混合<br><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" /><br>图片与文本内容混合</div>

        </div>

    </div>

</div>

<div class="frame">

    <div class="outer">

        <div id="middle">

            <div id="inner"><span>图片与文本</span><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" /><span>图片与文本</span></div>

        </div>

    </div>

</div>

<div class="frame">

    <div class="outer">

        <div id="middle">

            <div id="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>

</div>

    </div>

</div>

</body>

[转]div 让文字或图片居中的更多相关文章

  1. 文字和图片居中的HTML代码怎么写？

    HTML 代码 ,怎么将文本/ 图片居中?这是在W3Cschool的编程问答中前端♌蕾儿提出的问题.网友施主同西否给出了详细的解答. html文字居中和html图片居中方法代码,通过在html中实现文 ...

  2. Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置

    1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...

  3. div行高不确定，文字和图片居中

    // 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:center; display: -we ...

  4. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  5. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  6. DIV+CSS如何让图片和文字在同一行！

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  7. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  8. 用<center/>标签实现markdown 图片文字等内容居中显示

    markdown中,文字居中的方式是借助了html标签<center></center>的支持 示例 ![](https://img2018.cnblogs.com/blog/ ...

  9. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

随机推荐

  1. 微信分享朋友圈监听（PHP）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. cJSON 使用笔记

    缘      起 最近在stm32f103上做一个智能家居的项目,其中选择的实时操作系统是 rt_thread OS v1.2.2稳定版本,其中涉及到C和java(android)端数据的交换问题,经 ...

  3. 2013 US Open Award Ceremoney

    http://v.youku.com/v_show/id_XNjA3MjU3MzY4.html?firsttime=0 Singapore how about    another hand   tr ...

  4. iOS和android游戏纹理优化和内存优化(cocos2d-x)

    1.2d游戏最占内存的无疑是图片资源. 2.cocos2d-x不同平台读取纹理的机制不同.ios下面使用 CGImage,android和windows下是直接调用png库.我测试了下,使用png库直 ...

  5. j简单的递归

    1 某人写了n封信和n个信封,如果所有的信都装错了信封.求所有的信都装错信封共有多少种不同情况. 归纳法例子 1.有n个硬币(n为偶数)正面朝上排成一排,每次将n-1个硬币翻成朝上为止.编程让计算机把 ...

  6. 林子雨老师团队《Architecture of a Database System》 中文版

    http://dblab.xmu.edu.cn/post/architecture-of-a-database-system/

  7. Soft Renderer的乐趣

    最近这一个月的闲暇时间在边学习<3D编程大师技巧>边做自己的Soft Renderer,一个月下来总算有了个“基本原型”的样子.主要是在编写图形管线的过程式代码,简单明了为第一个阶段的目标 ...

  8. jackson使用示例

    Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. Jackson 2.x版提供了三个JAR包供下载: 1. Core库:strea ...

  9. Android 自定义组合控件

    1, you need to add this kind of code to the constructors of your custom view which must extend ViewG ...

  10. Mybatis-Generator 自动生成Dao、Model、Mapping相关文档

    最近在学习mybatis,结果在写Mapping的映射文件时insert语句一直报错,于是想看看标准的映射文件是什么样.百度到Mybatis-Generator 自动生成Dao.Model.Mappi ...