本文转自：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. CSS line-height 和 vertical-align 精解（下篇）

    申明本文转自:http://hi.baidu.com/wolongxzg/item/2383860ec8ac8b173a53eeb0 vertical-align 7.4.1 语法 vertical- ...

  2. 《Java程序员修炼之道》

    原子类:java.util.concurrent.atomic 线程锁:java.util.concurrent.locks 对付死锁:boolean acquired = lock.tryLock( ...

  3. ADO与ADO.NET的区别

    ADO是使用ole db接口并基于微软的COM技术,ADO.NET使用自己的ADO.NET接口并基于微软的.NET体系架构,所以ADO.NET与ADO是两种数据访问方式. ADO以recordset存 ...

  4. 鼠标指向GridView某列显示DIV浮动列表

    需求: 当GRIDVIEW数据列过多,不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息. 设计:先把需要显示的浮动数据一次过抓取出来.而不是鼠标指向的时候才从 ...

  5. Java组各任务工作流程

    1.周枫 A.提供基于SQL SERVER的数据库基本表结构创建脚本,基础数据脚本,按学科(产品)的数据脚本. 2.吴缤 A.提供给周茉的安装包用的项目文件,共三个digital,xylinkWeb和 ...

  6. C++ 名称空间

    在程序中,只使用 using namespace std; 而不使用其他的名称空间,如using namespace boost; 这样的好处有: 1.可以避免不同名称空间中的名称冲突: 2.可以很清 ...

  7. ReactNative学习实践--Navigator实践

    离上次写RN笔记有一段时间了,期间参与了一个新项目,只在最近的空余时间继续学习实践,因此进度比较缓慢,不过这并不代表没有新进展,其实这个小东西离上次发文时已经有了相当大的变化了,其中影响最大的变化就是 ...

  8. Codeforces Round #336 (Div. 2) C. Chain Reaction set维护dp

    C. Chain Reaction 题目连接: http://www.codeforces.com/contest/608/problem/C Description There are n beac ...

  9. php实现工厂模式

    设计模式-使用php实现工厂方法模式 [概要] 创建型模式 定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Method使用一个类的实例化延迟到其子类[GOF95] [结构图] ...

  10. [Node.js] Broswerify -- 2

    Browserify allows you to leverage 10s of thousands of javascript modules available in the Node Packa ...