<!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"><...
在网页设计中，让图片垂直居中是一项常见的需求，它能...通过阅读提供的文本文件"图片垂直居中2.txt、图片垂直居中3.txt、图片垂直居中1.txt、图片垂直居中4.txt"，你可以找到更多示例和解释，深入了解每种方法的细节。
Flexbox（弹性盒布局）是现代浏览器支持的一种强大的布局模式，可以轻松实现元素的水平或垂直对齐。要实现垂直居中，只需设置容器的`display`属性为`flex`，然后添加`align-items: center;`： ```css .container { ...
与横向对齐不同，图片的垂直对齐主要通过`img`元素的`vertical-align`属性来实现。这个属性接受多个值，包括`baseline`、`bottom`、`middle`、`sub`、`super`以及数值定义等。以下是各种值的含义： - `baseline`: ...
在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...
在这个"4个简单图片垂直居中"的案例中，我们将探讨几种主流的CSS策略来解决这个问题。 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。通过设置`display: flex`，...
- 使用CSS的`vertical-align`属性可以设置图片的垂直对齐方式。这个属性主要用于行内元素，比如`<img>`标签，定义其基线与其他元素的相对位置。 - `vertical-align`属性可以接受多种参数，如`baseline`、`sub`、`...
在实际应用中，除了图片和文字的垂直居中，该属性同样适用于其他行内元素或表格单元格元素的垂直对齐。 总结以上内容，实现同一行的图片和文字垂直居中对齐的方法，关键在于正确使用 vertical-align: middle; 属性...
效果描述： 在实际网页中，如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
以上就是实现图层中图片垂直水平居中的几种常见CSS方法。根据实际项目需求和浏览器兼容性，选择合适的方法。在实践过程中，还可以结合媒体查询（media queries）来确保在不同屏幕尺寸下仍能保持良好的居中效果。
关于图片垂直居中显示，想必很多写css的人都研究过、或者说是搜寻过方法，下面这篇文章就给大家介绍关于图片与文字垂直方向不对齐问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的...
1. **多选对齐**：允许用户选择多个图片对象，并一次性完成水平、垂直对齐，或者按照预设的对齐方式进行排列。 2. **参考线辅助**：提供可调整的参考线，帮助用户更准确地定位图片位置。 3. **网格对齐**：启用网格...
本教程将针对这个问题提供解决方案，通过一个小的示例项目——`TextViewDemo`，帮助开发者理解如何确保图片与第一行文字正确对齐。 首先，我们需要了解`TextView`的`drawableLeft`属性。这个属性允许我们在`...
总的来说，`jQuery.valign` 插件提供了一个简单且灵活的方法来处理元素在div容器内的垂直对齐问题，对于快速开发和调试具有很高的实用价值。结合其他前端技术，我们可以创建出更加美观和响应式的网页。
以上就是CSS实现图片垂直居中的几种常见方法。在实际开发中，应根据项目需求和浏览器兼容性选择合适的方法。对于老旧的浏览器，可能需要采用更传统的解决方案，如使用`table-cell`或JavaScript辅助。同时，随着技术...
本文将深入探讨“图片垂直居中样式”的实现方法，通过分析给定的代码片段，详细解释其中涉及的关键CSS技术点，以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...
在“对齐”下拉菜单中，选择“等距分布”（水平或垂直），选定的图形将在水平或垂直方向上自动调整间距，保持等距。 5. **网格线与参考线**：使用Excel的网格线和参考线也能辅助对齐。在“视图”选项卡下，勾选...
本文将深入探讨四种不同的CSS方法，用于实现图片在div容器内的垂直居中，每种方法都有其适用场景和独特之处。 ### 第一种方法：使用`table-cell`属性 这种方法的核心在于将div设置为`table-cell`，这样可以使其...
在网页布局设计中，将图片或者内容在div中实现垂直和水平同时对齐是一个常见的需求。这涉及到CSS的布局技术和定位方法。以下是如何利用`display`属性和特定的CSS技巧来达成这一目标的详细说明。 首先，我们有两个...