本文转自：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. js 基于函数伪造的方式实现继承

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

  2. extjs表格下的分页条——Ext.grid.Panel 的 pagingtoolbar

    两种分页条:每页固定条数的分页条 和 自定义选择每页内容条数的分页条 一.每页固定条数的分页条 这种样式的-- dockedItems: [{ xtype: 'pagingtoolbar', stor ...

  3. ISA中的WEB链

    在ISA Server 2004中提供了Web链功能,它就相当于将ISA Server配置为二级代理,可以将你的请求转发到上游的代理服务器或其他站点.使用Web链,你就可以实现条件路由,对不同的目的地 ...

  4. nslookup 查询IPv6

    > nslookup>  set type=AAAA > ipv6 domain name  (ipv6.google.com, time.buptnet.edu.cn)

  5. Java学习笔记之==与equals

    一.问题引入 Java测试两个变量是否相等有两种方式:==运算符和equals方法. 但是这二者完全一样吗?考虑下面程序: public class TestEqual { public static ...

  6. C++经典面试题

    1.int a=5,则 ++(a++)的值是() A.5      B.   6          C.7       D.逻辑错误 a++返回的是一个暂时变量,这里是右值,不能再前面++了 2.以下 ...

  7. 【M23】考虑使用其他程序库

    1.程序库的设计是一种权衡的结果.体积小,速度快往往不能移植.可移植,通用的程序库往往意味着冗余和效率低下. 2.因此,选择程序库的时候,需要进行取舍.比如:iostream和stdio.iostre ...

  8. ICPC-CAMP day1 D.Around the world

    Around the world 题目连接: 无 Description 给你一个n*n的矩阵,然后a[i][j]表示i,j是否有一条边 然后让你构造一个序列,使得i到(i+1)%n这两个点之间最多经 ...

  9. C#将html导出到word（基于wps）

    由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...

  10. [译]如何在Unity编辑器中添加你自己的工具

    在这篇教程中你会学习如何扩展你的Unity3D编辑器,以便在你的项目中更好的使用它.你将会学习如何绘制你自己的gizmo,用代码来实现创建和删除物体,创建编辑器窗口,使用组件,并且允许用户撤销他们所作 ...