axl234
- 浏览: 263374 次
- 性别:
- 来自: 北京
-
最新评论
-
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 772有效的团队协作开发， ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 815单例模式确保一个类在整个应用程序中只有一个是实例对象，在J ... -
前端性能优化
2014-05-27 15:16 8971. 请减少HTTP请求 基本原理： ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1230看了jquery的源码，jquery用的选择器的引擎是siz ... -
jQuery 1.8，1.9和2.0分别带来的新特性
2014-05-26 14:17 1349jQuery 1.8 可定制 在jQuery ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 653Codiqa，https://codiqa.com 简单试用 ... -
一种比CSS-Sprite更加方便在网页中嵌入大量图标的方法
2014-05-12 15:34 605这种思路是在一个国外的网站上发现的，设计者在网站中使用了很多 ... -
Google Developers的ResetCSS
2014-05-12 10:32 613@charset "utf-8"; ht ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1251除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 641当前在互联网上， ... -
设置双核浏览器的浏览模式
2014-01-20 15:44 677如果访问的页面中有 CSS3 代码，双核浏览器会自动切换到 ... -
iOS下无法正常渲染按钮的问题
2014-01-20 15:40 660最近做移动端的页面，碰到了一个问题，就是css无法定义按钮样 ... -
禁止横竖屏时内容自动调整
2014-01-20 15:36 549iOS下当竖屏转向横屏的时候，发现内容字体会自动变大，通过各 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2302<!DOCTYPE html><html&g ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 605一、思路 1、单击元素时，使元素可以编辑，并获得焦点 2 ... -
HTML5--JS API-新的选择器
2013-12-19 16:08 584新的选择器document.querySelector(&q ... -
视网膜New iPad与普通分辨率iPad页面的兼容处理
2013-12-03 10:54 890一、这是篇经验分享 ... -
设备像素比devicePixelRatio
2013-12-03 10:41 868一、定义 定义如下： window.devicePi ... -
jquery 方块转盘 得 ###jiang####品
2013-12-02 14:42 620<!DOCTYPE html PUBLIC " ... -
取代float基于display:inline-block的列表布局
2013-11-22 10:57 1477display:inline-block感觉与display ...
相关推荐
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
DIV+CSS 图片垂直居中效果
div框水平垂直居中跟内容垂直居中
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
在DIV中图片垂直/水平居中(最简单方法)
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
NULL 博文链接：https://zhouyao.iteye.com/blog/417432
一款不需要任何JS即可控制图片上下左右居中的效果 以前以为必须要JS才能控制...使用方法简单：图片外围包含两个容器即可，并设置图片宽度以及高度，如果是动态读取的话，则需要程序传递一个图片的高度以及宽度即可。
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
将`line-height`设置为与div的实际高度相等，可以实现文本在该div内垂直居中。以下是一个简单的例子： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 在HTML中，创建一个包含单行...
NULL 博文链接：https://javapub.iteye.com/blog/709361
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
NULL 博文链接：https://highfly-s.iteye.com/blog/1878910
这种方法适用于单行文字，但是在 Internet Explorer 6 及以下版本中，不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中...
div中多行文字垂直居中
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...