<!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. 三、利用EnterpriseFrameWork快速开发Winform系统（C/S）

    EnterpriseFrameWork框架实例源代码下载: 实例下载 上一章讲解了开发Web系统的详细步骤,以书籍的管理作实例实现对书籍的增.删.改.查功能,本章接着上面的实例继续补充用Winform ...

  2. TensorFlow深度学习实战---图像数据处理

    图像的亮度.对比度等属性对图像的影响非常大,这些因素都会影响最后的识别结构.当然,复杂的预处理过程可能会导致训练效率的下降(利用TensorFlow中多线程处理输入数据的解决方案). 同一不同的原始数 ...

  3. vue异步分页+初始化页面

    html代码: <section class="container page-home"> <div id="main-content" cl ...

  4. 用树莓派Raspberry Pi和Micro:bit做一个自拍器

    在这个项目中,我们将使用Python来构建一个由Micro:bit触发树莓派Raspberry Pi和相机模块的自拍器.这是开始使用硬件和简单文本编程的好方法. 我们将学习: 如何设置Raspberr ...

  5. 5个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  6. Python3 函数式编程自带函数

    一 map函数 引子 需求1:num1=[1,2,3,4],我的需求是把num1中的每个元素平方后组成新列表. ret = [] num1 = [1,2,3,4] for i in num1: ret ...

  7. 到底什么是BFC、IFC、GFC和FFC，次奥？

    软件开发的一般被称为民工,搞前端的,有人形容为是掏粪工,说白了连民工级别高都没有.说直接点就是个制作界面的,注意,连设计界面的都算不上,一般前端都是拿着设计稿去照这样子开发的. 说这些无非是觉得前端前 ...

  8. ecshop以及一些需要注意的

    Deprecated: Assigning the return value of new by reference is deprecated in 定位到出错的那一行: $this->_ol ...

  9. Polycarp and Letters（set首战！）

    Description Polycarp loves lowercase letters and dislikes uppercase ones. Once he got a string s con ...

  10. Alpha阶段事后诸葛亮会议记录

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2324 组名:可以低头,但没必要 组长:付佳 组员:张俊余  李文涛  孙 ...