本文转自：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. C#中的Collection 3

    IList<T> 和 ICollection<T> 最重要的一些类型 List<T>: Encapsulates[T], like array, but also ...

  2. android 三种弹出框之一PopupWindow

    PopupWindow 在android的弹出框我目前了解到的是有三种:AlertDialog,PopupWindow,Activity伪弹框, AlertDialog太熟悉了,这里就不介绍了 就先看 ...

  3. VC、MFC中设置控件的背景色、标题、字体颜色、字体要注意的地方[转]

    在MFC中设置控件的背景色.字体.字体颜色.标题等属性主要是利用OnCtlColor函数来实现. 如: HBRUSH CAlarm::OnCtlColor(CDC* pDC, CWnd* pWnd, ...

  4. 高性能的JavaScript -- 读书笔记

    高性能的JavaScript 一.      加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...

  5. Android 通过xml 自定义图片

    <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http:/ ...

  6. c#委托把方法当成参数

    //定义委托,它定义了可以代表的方法的类型 public delegate void GreetingDelegate(string name); /// <summary> /// 用英 ...

  7. Java程序打包成jar包

    方法一:通过jar命令 jar命令的用法: 下面是jar命令的帮助说明: 用法:jar {ctxui}[vfm0Me] [jar-file] [manifest-file] [entry-point] ...

  8. cocos2d-x 判断两条直线是否相交

    bool GraphicsUtil::linesCross(b2Vec2 v0, b2Vec2 v1, b2Vec2 t0, b2Vec2 t1, b2Vec2 &intersectionPo ...

  9. cocos2dx中加入unzip

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037323.html  cocos2dx中没有直接解压文件的,自己网上找了个,记录一下. ...

  10. .NET企业轻量级开发框架（APS.NET+Spring.Net+NHibernate）

          在<企业级应用架构>系列文章发表之余,也得到了许多同行的反馈,有人说这套框架太重了或者技术学习太复杂了或者初学者不太好理解或者完全颠覆了传统APS.NET开发模式让人望而生畏. ...