CSS:为什么“vertical-align:middle”不起作用?

2024-01-08

考虑以下示例:(现场演示在这里 http://jsfiddle.net/cXUnT/)

HTML:

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

CSS:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

输出是:

为什么图像不垂直居中?

我该如何解决这个问题,以便它可以在所有主要浏览器中运行?

请不要假设任何图像大小(例如本例中的 32x32),因为在实际情况下图像大小是未知的。


您可以使用position:absolute;为了这。

例如:

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

NOTE:这给出了margin-top图像大小的一半。

检查这个http://jsfiddle.net/cXUnT/7/ http://jsfiddle.net/cXUnT/7/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:为什么“vertical-align:middle”不起作用? 的相关文章

  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 获取点击元素的 HTML 内容 jQuery

    我有以下 HTML
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 如何将div内容添加到jspdf中的新页面?

    如何将div内容添加到jspdf中的新页面 我尝试使用 br 它创建了一个新页面 但我看不到内容 div div style margin 3px 430px First Page div div Place content to Seco
  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • 更改 teechart 中的单点颜色

    我在java中使用teechart 我想改变一系列点的颜色 而不是所有点 如果点的值超过特定值 则将点变成红色 我只知道如何更改所有点的颜色 这是我的代码 xline getPointer setVisible true 数据点突出显示 x
  • 与 mdf 文件的多个连接

    我正在为一个大学项目创建一个使用 C 的 Net 应用程序 并且需要一些帮助 我在网络驱动器上托管了一个 mdf 文件 并且需要多个客户端才能从其应用程序访问此数据库 每个客户端计算机都将运行自己的 sql express 实例 我可以从我
  • 实体框架包括扩展返回大量数据

    我有两个实体 User 和 UserPermission User 实体包含所有常规字段 Id Username Email 等 UserPermission 实体有两个值 UserId 和 PermissionId 我编写了一个存储库方法
  • 在 PHP 中,检查 30 分钟是否已过的示例?

    我有一个验证功能 用户将在 30 分钟后自动注销 我想在身份验证功能中存储登录时间 时间戳 然后 每次调用需要身份验证的函数时 我都会更新该时间 如果距上次通话已过去 30 分钟 则会自动重新进行身份验证 我将把上次访问时间戳或日期存储在全
  • 如何将 CMake 文件 (GLOB SRCS *.) 与构建目录一起使用

    这是我当前的 CMakeLists txt 文件 cmake minimum required VERSION 3 3 set CMAKE C FLAGS Wall g project bmi file GLOB SRCS cpp h ad
  • 选择 xQuery 中的第 n 个子元素/选择下一个元素

    我无法找到好的 xQuery 教程 基本上我想做的是检索文本etc 从这个 html 节点 div class venue div class vitem p style padding 6px 0pt 0pt class label AD
  • 配置 Microsoft.AspNet.Identity 以允许电子邮件地址作为用户名

    我正在创建一个新应用程序 并开始使用 EF6 rc1 Microsoft AspNet Identity Core 1 0 0 rc1 Microsoft AspNet Identity EntityFramework 1 0 0 rc1
  • PowerShell 是强类型语言吗?

    PowerShell 肯定属于动态语言的范畴 但它会被视为强类型吗 这些术语存在一定程度的混乱 本文 http eli thegreenplace net 2006 11 25 a taxonomy of typing systems 解释
  • 在Android应用程序上获取id令牌并在后端服务器上验证它(如何使用id令牌?)

    我正在开发一个 Android 应用程序 它使用来自我自己的 REST API 服务器的数据 我想使用 Firebase 身份验证 因为它允许用户以非常简单的方式使用 Google Facebook Twitter 登录 但我不知道如何使用
  • Intl.Collat​​or 和带有数字选项的自然排序对十进制数字的排序不正确

    使用对十进制数进行排序Intl Collator以及启用的选项numeric比较小数不正确 在某些浏览器上 比较 0 005 和 0 05 会返回 0 因为数字相同 不同浏览器中的结果 铬 54 0 火狐 49 0 边缘 1 IE 11 1
  • 如何跳过 PHPUnit 中的前 N ​​个测试?

    场景 使用 PHPUnit 运行大量测试 一些测试 例如 1544 中的 537 个 在几分钟后失败 更改很小 不太可能影响之前的测试 我希望能够跳过前 536 个测试 执行类似这样的操作以 从我上次停下来的地方继续 phpunit ski
  • 在 ASP.NET 中自动进行 HtmlEncode

    被 Ruby on Rails 3 宠坏了 我希望所有 HTML 输出都能自动编码 我问这个关于脚本漏洞的问题 https stackoverflow com questions 7136864 script exploits in asp
  • 将本机页脚视图添加到 webview

    我有一个WebView和我想在下面添加的本机自定义视图WebView 我试过包裹WebView里面一个ScrollView 虽然这正是我想要的 但滚动性能确实很滞后 如果用户点击屏幕滚动滚动条并不会像应有的那样停止滚动 我想到的另一种方法是
  • ASP.NET MVC + 模型状态和部分视图

    我有一个名为 LogOn 的部分视图 其中我基本上将登录输入复制到控件中 我使用 Html RenderPartial 将控件放置在 Ajax BeginForm 内的 Index Html 中 div div 我正在尝试传回验证消息并显示
  • 单击按钮后按键监听器不工作

    我在java中的框架上附加了一个按键侦听器 当我按下任何键时 我可以检测到按键 但是奇怪的事情正在发生 我的游戏是扫雷游戏 我有一个重新启动按钮 基本上可以清除棋盘并重新挖掘它 奇怪的是 当我用鼠标单击按钮时 一切都正常 并且面板被提醒 但
  • pandas 数据框的高效扁平化

    我有一个熊猫数据框 它看起来像这样 pd DataFrame data np arange 1 10 reshape 3 3 index A B C columns A B C 但有 100 行和 100 列 我想把它压平 使它看起来像这样
  • 将文本从电脑复制并粘贴到 Android Studio 模拟器时出错

    大约 2 个月前 我能够从电脑剪贴板复制文本并将其粘贴到在 Android Studio 模拟器上运行的应用程序中 只需在电脑上执行 ctrl c 并将其粘贴到 TextView 中即可 现在我使用的是新版本的Android Studio
  • 钥匙锁实际上锁定了什么资源?

    我知道钥匙锁将钥匙锁定在索引中 然而 钥匙 到底意味着什么呢 例如 如果我在姓氏列上有一个非聚集索引并尝试更新姓氏 Jones 的位置 那么我是否会有效锁定表中姓氏为 Jones 的每一行 或者索引会被锁定在更高的级别 从而阻止访问姓氏不是
  • 在 ListView 中触摸项目时更改行背景颜色

    我尝试使用 BaseAdapter 在 ListView 中显示项目 我在 BaseAdapter 中尝试以下代码 Override public View getView final int position View convertVi
  • CSS:为什么“vertical-align:middle”不起作用?

    考虑以下示例 现场演示在这里 http jsfiddle net cXUnT HTML a img src http img brothersoft com icon softimage s smiley s challenge 13193