axl234
- 浏览: 268839 次
- 性别:
- 来自: 北京
-
最新评论
-
haixin3036：
jQuery是一套跨浏览器的JavaScript库，简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang：
非常感谢分享，正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369：
不错。。。
移动端webapp开发必备知识
Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题，我总结出以下居中办法，兼容IE与及Firefox
方法一
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
方法二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法三
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法4
使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。
CSS Code：
.box { border: 1px solid #eee; /* 设置水平居中 */
text-align: center; /* 非IE的主流浏览器识别的垂直居中的方法 */ display: table-cell;
vertical-align: middle; /* 针对 IE 的 Hack */
*display: block; /* 防止非 utf-8 引起的 hack 失效问题，如 gbk 编码 */ *font-family:Arial; /* 约为高度的 0.873， 200*0.873 约为 175 */ *font-size: 175px;
height: 200px;
width: 200px; }
.box img { /* 设置图片垂直居中 */ vertical-align: middle; }
HTML Code：
<div class="box">
<img src="http://img.baidu.com/img/image/imglogo.gif" />
</div>
方法一
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
方法二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法三
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法4
使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。
CSS Code：
.box { border: 1px solid #eee; /* 设置水平居中 */
text-align: center; /* 非IE的主流浏览器识别的垂直居中的方法 */ display: table-cell;
vertical-align: middle; /* 针对 IE 的 Hack */
*display: block; /* 防止非 utf-8 引起的 hack 失效问题，如 gbk 编码 */ *font-family:Arial; /* 约为高度的 0.873， 200*0.873 约为 175 */ *font-size: 175px;
height: 200px;
width: 200px; }
.box img { /* 设置图片垂直居中 */ vertical-align: middle; }
HTML Code：
<div class="box">
<img src="http://img.baidu.com/img/image/imglogo.gif" />
</div>
分享到：
发表评论
-
CSS团队协作开发方式的思考
2014-05-29 10:59 796有效的团队协作开发， ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 832单例模式确保一个类在整个应用程序中只有一个是实例对象，在J ... -
前端性能优化
2014-05-27 15:16 9171. 请减少HTTP请求 基本原理： ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1255看了jquery的源码，jquery用的选择器的引擎是siz ... -
jQuery 1.8，1.9和2.0分别带来的新特性
2014-05-26 14:17 1382jQuery 1.8 可定制 在jQuery ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 678Codiqa，https://codiqa.com 简单试用 ... -
一种比CSS-Sprite更加方便在网页中嵌入大量图标的方法
2014-05-12 15:34 634这种思路是在一个国外的网站上发现的，设计者在网站中使用了很多 ... -
Google Developers的ResetCSS
2014-05-12 10:32 645@charset "utf-8"; ht ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1323除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 662当前在互联网上， ... -
设置双核浏览器的浏览模式
2014-01-20 15:44 704如果访问的页面中有 CSS3 代码，双核浏览器会自动切换到 ... -
iOS下无法正常渲染按钮的问题
2014-01-20 15:40 707最近做移动端的页面，碰到了一个问题，就是css无法定义按钮样 ... -
禁止横竖屏时内容自动调整
2014-01-20 15:36 578iOS下当竖屏转向横屏的时候，发现内容字体会自动变大，通过各 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2336<!DOCTYPE html><html&g ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 628一、思路 1、单击元素时，使元素可以编辑，并获得焦点 2 ... -
HTML5--JS API-新的选择器
2013-12-19 16:08 603新的选择器document.querySelector(&q ... -
视网膜New iPad与普通分辨率iPad页面的兼容处理
2013-12-03 10:54 920一、这是篇经验分享 ... -
设备像素比devicePixelRatio
2013-12-03 10:41 901一、定义 定义如下： window.devicePi ... -
jquery 方块转盘 得 ###jiang####品
2013-12-02 14:42 639<!DOCTYPE html PUBLIC " ... -
取代float基于display:inline-block的列表布局
2013-11-22 10:57 1525display:inline-block感觉与display ...
相关推荐
#### CSS垂直居中原理 在CSS中，`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是，当涉及到块级元素时，这个属性并不起作用。因此，我们需要采用其他技术来达到垂直居中的目的。...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
通过设置`height`和`line-height`为相同的值，可以使得DIV内的文本或单行内容在容器内垂直居中。例如： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 然而，这种方法的局限性在于它...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
div框水平垂直居中跟内容垂直居中
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
总的来说，`DIV+CSS`的居中布局有多种实现方式，选择哪种方法取决于具体的需求和浏览器兼容性考虑。随着现代浏览器对Flexbox和Grid的支持日益增强，它们已经成为实现居中布局的首选方法。然而，对于老版本浏览器，`...
这样，图片将在其容器内水平和垂直居中。 另外，如果您的项目需要支持较旧的浏览器，可以使用CSS的绝对定位方法。这种方法需要设置容器为相对定位（`position: relative`），然后将图片设置为绝对定位，并将其`top`...
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...
在网页设计中，将图片水平垂直居中于一个DIV元素是常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果，并提供相关的源码示例。 首先，我们要明白CSS中的定位机制，包括静态定位、相对定位、...
最后，CSS3的弹性盒子模型提供了一种更为简便和直观的方式来实现垂直居中，通过设置`flex-direction:column`和`justify-content:center`，可以使容器内的所有项目沿垂直方向居中。这种方式不仅简洁，而且性能较好，...
在讨论JSP页面中图片居中的问题时，首先需要掌握一些基础的CSS布局知识，包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧以及W3C标准对页面渲染的影响。 当涉及到在div中居中一张图片时，CSS是...
这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一种流行的JavaScript库，提供了丰富的功能和简便的API。 首先，我们来探讨CSS中...
在网页设计中，让多行文字在`div`元素中垂直居中是一项常见的需求，尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
"div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**： CSS中的定位...
在IE7+中实现垂直居中，我们可以采用多种方法，每种方法都有其适用场景和优缺点。以下是一些常见的技术： 1. **CSS Table布局**： - 设置父容器`display: table`，子元素`display: table-cell`。 - 使用`vertical...
课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料，包含了具体的代码示例...
本资源"纯css实现div容器内图片上下左右居中效果.zip"提供了一个使用纯CSS实现图片在div容器内完全居中的解决方案。下面将详细解释这一技术及其背后的原理。 首先，我们关注的是“纯CSS”方法，这意味着我们将不...
这种方法在大多数浏览器中都能正常工作，但需要注意的是，对于IE6及以下版本，它不适用于图片的垂直居中。 2. **多行未知高度的文字垂直居中** 如果内容的高度是可变的，我们可以利用`padding`来模拟垂直居中。...