本文转自：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. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  2. [Linux]常用命令与目录全拼

    命令缩写: ls:list(列出目录内容)cd:Change Directory(改变目录)su:switch user 切换用户rpm:redhat package manager 红帽子打包管理器 ...

  3. [Sparrow OS 设计文档连载（一）] Introduction

  4. 在Windows2012下安装SQL Server 2005无法启动服务的解决办法

    下面是我亲自经历过的总结. 因为尝鲜安装了Windows2012,的确很不错,唯一的遗憾就是不支持Sql Server 2005的安装.找了很多办法,基本上都有缺陷.现在终于找到一种完全正常没有缺陷的 ...

  5. MRI中T1和T2的含义与区分[转]

    A. MRI名词解释   T1加权像.T2加权像为磁共振检查中报告中常提到的术语,很多非专业人士不明白是什么意思,要想认识何为T1加权像.T2加权像,请先了解几个基本概念:   1.磁共振(maget ...

  6. EasyMock 使用方法与原理剖析

    from:http://www.ibm.com/developerworks/cn/opensource/os-cn-easymock/ Mock 方法是单元测试中常见的一种技术,它的主要作用是模拟一 ...

  7. Java中String对象的不可变性

    首先看一个程序 package reverse; public class Reverse { public static void main(String[] args) { String c1=n ...

  8. Codeforces Gym 100531I Instruction 构造

    Problem I. Instruction 题目连接: http://codeforces.com/gym/100531/attachments Description Ingrid is a he ...

  9. linux C(hello world)

    1.使用vi/vim进行编写代码并保存为hello_world.c.如下: /* This is my first C program*/ #include <stdio.h> int m ...

  10. Editor Scripting学习笔记之Menu Item

    主要用到: MenuItem属性 MenuCommand参数 可能用到: EditorApplication类 Selection类 GameObjectUtility类 FileUtil类 Undo ...