<!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>利用定位来显示垂直局中的图片</title>
<style type="text/css">
div{width:400px;overflow:hidden;border:solid 1px black;position:relative;}
ul{height:110px;width:20000px;}
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;*position:relative;*overflow:hidden;float:left;}
.miao a{display:table-cell;vertical-align:middle;border:solid 1px blue;*position:absolute;*left:50%;*top:50%;}
.miao a img{border:dashed 1px green;*position:relative;*left:-50%;*top:-50%;}
</style>
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<div>
<ul>
<li class="miao">
<a><img src="http://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:300px;height:80px;">
<a><img src="ttp://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:500px;height:220px;">
<a><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></a>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下： 有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于...
效果描述： 在实际网页中，如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
关于图片垂直居中显示，想必很多写css的人都研究过、或者说是搜寻过方法，下面这篇文章就给大家介绍关于图片与文字垂直方向不对齐问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的...
主要介绍了iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐的相关资料,需要的朋友可以参考下
最近项目中碰到的问题，具体代码就不写了，大体说下思路，有两个div，包含关系，图片在小的div中，大的div实现小div垂直居中，或水平，小div再实现另一个方向上的居中就可以了，忘了说了，外面div style="display:...
最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下... 利用vertical-align实现图片垂直居中对齐 </title> <style> #content { position:absolute; top:0;right:0;bottom:0;left:0; margin:auto;
如下图所示： 于是上网查看了一些网站，发现这个问题是普遍...2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往
今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明： 外侧...
Sass有用的mixins媒体查询，字体大小，过渡，不透明度，背景图像，字体，占位符，垂直对齐 易于使用的Sass有用的mixins媒体查询，字体大小，过渡，不透明度，背景图像，字体，占位符，垂直对齐 特征 媒体查询 背景...
4.图片始终保持水平垂直居中。 5.图片的行列数不变，这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性，比如高级浏览器居中常用的什么 display:table-cell;vertical-...
下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img...
UIEdgeInsets typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets;...
6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 ...
下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器...
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准...