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”不起作用? 的相关文章

  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

随机推荐

  • 更改 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