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

正如标题所言图片与上层的div保持水平、垂直都居中，网上会搜索到很多类似标题的文章，不过大同小异，本文写了一个希望对大家有所帮助

 

 

复制代码
代码如下:

<!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="bdlogo.gif" >
</div>
<p>示例二</p>
<div class="thumbBox">
<img src="cb32ecdc7d0def4d123ae4c38c50050b.jpg" >
</div>
</body>
</html>

时间： 2024-10-26 02:17:02

如何让图片相对于上层DIV始终保持水平、垂直都居中的相关文章

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div强迫向上移动div高度一半,向左移动div宽度一半 <style> html,body{padding:0;margin:0;} #container {  position:absolute;  left:50%;  width:400px;  height:200px;  margin-left:-200px;  top:50%;  mar

CSS布局：图片在DIV中上下左右居中(水平和垂直都居中)

  CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: 测试效果如下:可看到图片在Div class内水平和垂直居中:

div布局-设置有背景图片的&amp;amp;lt;div&amp;amp;gt;块中怎么开发出一个白色的块？

问题描述 设置有背景图片的<div>块中怎么开发出一个白色的块? 我用一个图片添加为一个 的背景,然后想在这个块中再添加一个白的的块,但是这个快没法变为白色. 谢谢回答. 解决方案 贴代码,或者贴效果图. 解决方案二: 不知道你想要什么样的效果,在上面再加一个div就好了啊 解决方案三: 代码贴一下,这样不知道你要干什么 解决方案四: 浮上去一个白色的块就可以了啊 解决方案五: 我也是初学者 看看吧 不一定对 <!doctype html> <div style='backg

div布局，上中下结构，怎么让高度固定的div始终在高度自适应的div下面

问题描述 div布局,上中下结构,怎么让高度固定的div始终在高度自适应的div下面 我做了一个页面布局为上中下,上面和下面的高度都是固定的,中间的高度是自适应的,下面那个div要怎么设置才能紧挨着中间的那个div我写的都跑到上面去了 解决方案 试试,下面的用下边距0固定 解决方案二: 贴出具体代码看看吧. 解决方案三: 正常就是上中下,除非你设置其他样式了. <div style=""height:100px"">上面</div> <

CSS打造无图片带箭头的DIV方框

<html>  <head>  <title>纯CSS无图片带箭头的DIV方框</title>  <style>  div.container{position:absolute;  top:30px;  left:40px;  font-size: 9pt;  display:block;  height:100px;  width:200px;  background-color:transparent;  *border:1px solid

jquery实现弹出div,始终显示在屏幕正中间的简单实例

 本篇文章主要是对jquery实现弹出div,始终显示在屏幕正中间的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 以下代码块就能始终让弹出div位于屏幕的正中心,希望对大家有所帮助!  代码如下:     //让指定的DIV始终显示在屏幕正中间        function setDivCenter(divName){            var top = ($(window).height() - $(divName).height())/2;           

jquery实现弹出div,始终显示在屏幕正中间的简单实例_jquery

以下代码块就能始终让弹出div位于屏幕的正中心,希望对大家有所帮助! 复制代码 代码如下:     //让指定的DIV始终显示在屏幕正中间       function setDivCenter(divName){           var top = ($(window).height() - $(divName).height())/2;           var left = ($(window).width() - $(divName).width())/2;           v

纯CSS无图片带箭头的DIV方框

<html> <head> <title>纯CSS无图片带箭头的DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{

jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右