如何在任何情况下保持文本垂直对齐?

2024-04-21

例如,在下图中,我希望在所有条件下保持文本始终垂直对齐。即使文本是一行、两行或三行。

意味着文本应始终垂直居中。我不想添加额外的span

<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>

我想用这个html来实现。

Edit

我不想给任何元素固定宽度和高度


Chris Coyier 就此写了一篇很棒的教程:http://css-tricks.com/vertically-center-multi-lined-text/ http://css-tricks.com/vertically-center-multi-lined-text/

我自己用过,效果非常好。

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

如何在任何情况下保持文本垂直对齐? 的相关文章

  • 我可以在元标记中使用 HTML 字符实体吗?

    我有一个有两种语言的网站 英语和中文 在使用 UTF 8 字符集的英文主页中 我有 例如 这出现在搜索结果中 我想将其更改为 在哪里 20013 25991 是 中文 的 ISO 实体 搜索结果中会显示为 中文 吗 我无法将 中文 直接粘贴
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde

随机推荐

  • 在 NSMenuItem 中使用 NSProgressIndicator

    我正在尝试在状态栏菜单内使用 NSProgressIndicator 不确定 我使用 NSView 对象作为菜单项的视图 然后子视图进度指示器来显示它 但是每当我尝试调用 startAnimation 来获取进度时 什么也没有发生 当我尝试
  • 使用conftest.py 与从专用模块导入装置

    我最近开始熟悉 pytest 以及如何使用conftest py定义在我的测试中自动发现和导入的装置 我很清楚如何conftest py工作原理以及如何使用它 但我不确定为什么这在某些基本场景中被认为是最佳实践 假设我的测试是这样构建的 t
  • UITextView 可以容纳多少文本?

    我有一个不可编辑的UITextView显示用户输入的文本 如果文本很长会发生什么 它会让我的应用程序崩溃吗 我应该对文本进行分页吗 iPhone 网络浏览器 如 Safari Chrome 或 Firefox 如何处理此问题 有没有类似的东
  • 如何在Cloudant或CouchDB中使用skip参数?

    在 Cloudant 或 CouchDB 的索引中使用 Skip 参数是否存在潜在的性能损失 有更好的技术可以使用吗 The 在 CouchDB 中写入和查询 MapReduce 视图 http my safaribooksonline c
  • React antd 轮播方法

    我正在考虑使用antd轮播 但我还没有看到描述如何使用的示例goTo slideNumber dontAnimate 方法 我尝试过使用这个问题的答案带箭头的react js antd轮播 https stackoverflow com q
  • Xamarin 不尊重 JDK 位置 (VS2015)

    我无法在 Visual studio 2015 中构建 Xamarin 应用程序 因为 Xamarin 忽略配置的 JDK 位置 我将 Xamarin 配置为使用 JDK 1 8 但构建仍然失败 因为它使用的是我从计算机中删除的旧 JDK
  • 在 Linux (libusb-1.0) 上访问 USB 设备?

    我正在编写一个小程序 使用 Linux 上的 libusb 1 0 与特定 USB HID 产品 由供应商和产品 ID 标识 进行通信 现在 我必须以 root 身份运行该程序 因为 libusb 需要对 USB 设备节点的写访问权限 有没
  • UNIQUE 约束失败:accounts_user.username

    让我们开始解决问题 我有一个页面 我希望用户在其中填写有关自己的信息 并且我想保存该数据 但我收到这个错误 IntegrityError at accounts profile edit 1 change profile UNIQUE co
  • python 中两个字符串的 Anagram 测试

    这是问题 编写一个名为 test for anagrams 的函数 该函数接收两个字符串 参数 均由字母字符组成 返回 如果两个字符串是字谜词 则为 True 否则为 False 两个字符串是 如果一个字符串可以通过重新排列来构造 则为 a
  • Silverlight 异步单元测试

    我在使用 Silverlight 单元测试框架时遇到了一个奇怪的问题 每次执行的第一个方法都会失败 我使用完全相同的代码进行了第二次测试 并且通过了 第一次调用的奇怪之处在于 它实际上是在等待超时and then执行存储库调用 如果您关心的
  • 张量流 LSTM 模型中的 NaN 损失

    以下网络代码应该是经典的简单 LSTM 语言模型 一段时间后开始输出 nan 损失 在我的训练集上 这需要几个小时 而且我无法在较小的数据集上轻松复制它 但在认真的训练中 这种情况总是会发生 Sparse softmax with cros
  • Expect 脚本中 sudo 的问题

    我正在运行以下脚本 usr bin expect f set user lindex argv 0 set pass lindex argv 1 set PATH lindex argv 2 set INV PATH lindex argv
  • EXC_BAD_INSTRUCTION 将 UICollectionView 单元格数据传递给不同的 ViewController 时

    我有一个基于 Firebase 数据填充的 UICollectionView 我创建了填充 UICollectionView 的自定义单元格 import UIKit import Material class PollCell Colle
  • 切换到 .net core 3 端点路由后,身份 UI 不再工作

    在很难让我的区域显示端点路由之后 我设法在这个自我回答的线程中修复它 尽管不是以非常令人满意的方式 从 2 2 迁移到 3 0 后出现问题 默认工作但无法访问区域 是否有办法调试端点分辨率 https stackoverflow com q
  • 版本控制与错误跟踪软件的集成有多重要[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 目前我们使用 FogBugz 来跟踪问题 发现它没问题 我正在寻找其他东西 让最终用户能够与我们一起跟踪他们的案例 以及实际上与电子邮件配合良好
  • 悬停在动画元素上不一致

    我正在使用 css 围绕圆形路径旋转 div 并且我想让它在悬停时改变颜色 请参阅此处的演示 http jsfiddle net gg7tnueu 1 http jsfiddle net gg7tnueu 1 html body heigh
  • Twitter Bootstrap 下拉菜单不起作用

    我知道 Stack Overflow 上有很多类似的问题 我已经查看过它们 但我的下拉菜单仍然不起作用 这是我的代码 div class navbar navbar inverse navbar fixed top div class na
  • 如何制作这个构造函数的深层复制?

    我制作了这个构造函数 我需要对其进行深层复制 我不太明白深拷贝的含义 我知道它会创建一个拥有自己的动态内存的对象的独立副本 但我不明白这样做的需要是什么 我也不确定如何实际实现深层复制 有什么建议么 这是我需要进行深层复制的构造函数 任何人
  • 配置 Mule JPA 模块以使用 Eclipse Link 和 MySQL

    我正在尝试编写一个 Mule ESB 应用程序 它将 XML 文件读入域对象 然后使用 JPA 将该对象写入 MySQL 数据库 我已经弄清楚了大部分所需的配置 但我遇到了一个问题 其中 Mule JPA 模块 https github c
  • 如何在任何情况下保持文本垂直对齐?

    例如 在下图中 我希望在所有条件下保持文本始终垂直对齐 即使文本是一行 两行或三行 意味着文本应始终垂直居中 我不想添加额外的span div img src Hello Stackoverflow Thank you for help m