<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>使图片相对于上层DIV始终水平、垂直都居中</title>

<style type="text/css">

.thumbBox {width:260px; height:260px; text-align:center; vertical-align:middle; display:table-cell; border:1px solid red;}

</style>

</head>

<body>

使图片相对于上层DIV始终水平、垂直都居中

<p>示例一</p>

<div class="thumbBox">

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

</div>

<p>示例二</p>

<div class="thumbBox">

    <img src="http://y2.ifengimg.com/mappa/2013/06/03/cb32ecdc7d0def4d123ae4c38c50050b.jpg" >

</div>

<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>

</body>

</html>

使图片相对于上层DIV始终水平、垂直都居中的更多相关文章

  1. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  2. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  3. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  5. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  6. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  7. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  8. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  9. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

随机推荐

  1. NUnit基本使用方法

    通常的单元测试框架都以他们支持的语言的开头字母加上Unit作为名字,他们统称为xUnit框架.C++的叫做CppUnit,Java的叫做JUnit,.Net的叫做NUnit.当然不是所有的都这么命名, ...

  2. fiddler的断点使用

    功能 用于修改数据 1.断点设置请求之前--修改请求数据 2.断点设置在响应时--对响应的数据修改 已中断的会话最前面的图标为红色的带箭头的标志 设置断点方法 1.菜单栏:rules->auto ...

  3. 袋鼠云研发手记 | 袋鼠云EasyManager的TypeScript重构纪要

    作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,袋鼠云产品家族包括企业级一站式数据中台PaaS数栈.交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代.在 ...

  4. Jenkins之Sonar 代码检查

    一.简介 SonarQube 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等 ...

  5. arcgis10.2怎么把地理坐标系转化为投影坐标系（平面，米制坐标） arcmap 10.2 从 WGS_1984 转 Beijing_1954

    方法一:在Arcmap中转换:从 WGS_1984 转 Beijing_19541.加载要转换的数据,右下角为经纬度2.点击视图——数据框属性——坐标系统3.导入或选择正确的坐标系(如选:Beijin ...

  6. centos下安装升级python到python3.5

    本文摘抄自:https://www.cnblogs.com/edward2013/p/5289056.html  请支持原版 CentOS7安装Python3.5   2. 安装Python的依赖包 ...

  7. JS 数组方法 array数组声明 元素的添加和删除 等

    声明数组 var arr1 = [1,2,3,4,5]; var arr2 = new Array(100); //声明长度为100的arr2数组. arr2=[]; arr2.length = 10 ...

  8. linux awk,sort,uniq,wc,cut命令详解

    1.awk awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 $ 表示当前行 $ 表示第一列 NF 表示一共有多少列 $NF 表示最 ...

  9. 20162328蔡文琛 Bag类

    在刚刚开始着手这个作业时,想的是使用for循环来自己写出add等方法来,但是在看过API后知道了Arraylist这个java已有的列表类,于是就只用ArrayList的方法很快的就做了出来.在进行B ...

  10. C++的反思与总结

    博客作业学到的东西: 1.博客作业应该说是从寒假就开始了,因为博客作业,所以我寒假时都不敢玩得太疯狂,毕竟还有博客作业没做呢.有了博客作业,我就从一个连博客是什么都不知道无知少年,开始去了解博客是什么 ...