在段落中放置表情符号而不影响“行高”

2023-11-25

如何在不影响段落内容的情况下插入表情符号line-height不管表情有多大? IE。喜欢:

enter image description here

我得到的最接近的是position: absolute or vertical-align: text-top,其中没有一个能完成这项工作。

p img {
    height: 35px;
    display: inline;
}
#one img {
    vertical-align: text-top;
}
#two img {
    position: absolute;
}
<p id="one">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>
<p id="two">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

我知道类似的问题here and here,然而两者都已经过时并且没有正确的答案。


您可以使用

margin-top: [something];
margin-bottom: [something];
vertical-align: middle;

Where [something] is (containerLineHeight - imageHeight) / 2.

另请注意,您可以只使用margin: [something] 0如果没有左右边距。

例如,由于图像有height: 35px,假设容器有line-height: 20px,

margin: -7.5px 0; // (20px - 35px) / 2

p {
  line-height: 20px;
}
p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -7.5px 0;
}
<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

注意使用上面的值7.5px不会受伤,因为vertical-align: middle。因此,你可以使用类似的东西

margin: -1000000px 0;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000px 0;
}
<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

或者,您可以使用百分比,该百分比将根据生成的框的宽度进行计算包含块.

因此,假设容器的宽度大于图像的高度,margin: -50% 0应该足够了。

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -50% 0;
}
<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

为了更安全,您还可以使用类似的东西margin: -1000000% 0

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000% 0;
}
<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在段落中放置表情符号而不影响“行高” 的相关文章

  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • 上/下箭头键与预输入控件的问题(角度引导 UI)

    检查这个PLNKR http plnkr co edit grrAxz158PTShzpxz2f0 我已经实现了预先输入控制 默认情况下 在类型提前控件中 他们不会设置任何最大高度或列表高度 但根据要求 我必须将列表高度固定为 110px
  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe
  • 如何交换 2 个元素的两侧(一个使用 float:left,另一个使用 float:right)

    I have a website with an image on one side and text on the other This is how it looks 正如您在图像中看到的 左侧有一些文本 右侧有图像 然后左边有图像 右
  • 如何在图像上叠加徽标?使用CSS

    正如您所看到的 徽标显示在背景图像上方 但我希望它位于背景图像的中心 这是我的标题 背景需要从页面顶部开始并在菜单之前结束 徽标需要显示在背景图像的中央 我已经尝试了很多 但也许有人遇到了类似的问题 可以帮助我解决这个问题 这张图片显示它几
  • 如何在 CSS 中将子元素居中,即使它比父元素大?

    我想创建一个 css 类 以便可以将 div 放置在其父级的中心 我正在使用的代码是 centered position absolute margin auto bottom 0px left 0px top 0px right 0px
  • 如何使输入字段的宽度为 100% 减去提交按钮的宽度?

    我有一个非常基本的单一输入字段 旁边有一个 提交 按钮 搜索按钮的固定宽度为 104 像素 两者都包裹在一起 总宽度占浏览器视口的 50 我的计划是允许输入字段随着浏览器窗口的扩大而扩大 目前 对于我的特定浏览器窗口 我必须修复输入字段的宽
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • AJAX 加载的图像在 Safari 中无法正确显示

    因此 我使用 AJAX 加载每个页面的内容并将其注入当前页面 在 Chrome Firefox Internet Explorer 上一切都运行良好 尽其所能 哈哈 并且除了两个奇怪的部分之外 内容在 Safari 上加载良好 通过 AJA
  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0
  • 如何左对齐 Bootstrap 3 下拉菜单?

    在上图中 MenuItems 与 MyMenu 的右侧对齐 我需要将 MyMenu 的 MenuItems 左对齐 我的意思是它必须与 MyMenu 的左边缘对齐 我尝试使用 pull left 和 pull right 类 例如 ul c
  • 检测滚动条是否可见(例如在移动设备上)

    我见过很多关于检测 HTML 元素是否可滚动的问题 答案 例如动态检测滚动条 https stackoverflow com questions 33805052 detect scrollbar dynamically 我需要类似的东西
  • SASS for 循环更新 hsla 亮度返回错误 $lightness: "96.77419" 不是 `hsla' 的数字

    我试图循环一定次数 逐渐降低 hsla 的亮度值 但是当我运行循环时 出现错误 lightness 96 77419 is not a number forHSLA 谁能告诉我哪里出了问题或者如何改进 Code iterations 31
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • 固定 CSS 导航栏

    我最近解决了困扰我一段时间的 CSS 导航栏问题 现在我遇到了将其固定到顶部的问题 以便当您滚动页面时它会向下滚动 我知道我需要添加的是 Position fixed 但我不知道在哪里添加它 我最近的尝试导致文本被修复 但导航栏的背景却没有
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • 在原始颜色和设置颜色之间设置动画背景

    我有带有随机初始背景颜色的 HTML 元素 我需要在原始 初始 和新元素之间对选定元素的背景颜色进行动画处理 我一直在尝试使用 keyframes blink red 0 background color initial color ini
  • 使用 JavaScript 和 HTML 打印表情符号

    为什么这有效 p x1f604 p 而这并没有 document getElementById emoji innerHTML String fromCharCode parseInt 1f604 16 JS 术语中的 char 实际上是一

随机推荐

  • remquo 函数有什么作用以及可以用来做什么?

    通读 C 规范我发现了这个函数 double remquo double x double y int quo float remquof float x float y int quo long double remquol long d
  • 不使用 JavaScript 将焦点设置在 EditorFor 上

    是否可以在不使用 JavaScript 的情况下将焦点设置在页面加载时的以下代码上 div class col md 10 Html EditorFor model gt model Description Html ValidationM
  • Java中如何检查线程是否已经启动? [复制]

    这个问题在这里已经有答案了 我正在上一堂延伸课Thread 我会在某个时候启动线程 一段时间后我需要检查该线程是否已经启动 这样我就可以在该特定点启动线程 我的线程类将是 public class BasicChatListener ext
  • java版本错误,无法升级jenkins

    我的 Ubuntu 14 04 上运行着 Jenkins 我正在尝试使用正常的方式升级 jenkinsapt get install jenkins 但是当我尝试这样做时 我不断收到错误 Setting up jenkins 2 73 Fo
  • 如何从 NIB 读取 UITableViewCell(子类)的高度?

    我在 NIB 中定义了一个 UITableViewCell 实际上是一个子类 在 NIB 中 我将框架高度设置为 183 还将 行高 设置为 183 并勾选了自定义 在我最初的问题中 这里一切都出了问题 看起来我得到了错误的高度 单元格加载
  • 使用 1 个选项取消选择“多选”中的所有选项

    我目前有以下js代码 function clearMulti option var i var select document getElementById option parentNode id for i 1 i
  • 在 Spring Data Rest 中修改 @OneToMany 实体而不使用其存储库

    在我的项目中我使用对象类型A与类型的对象具有 OneToMany 关系 orphanRemoval true cascade CascadeType ALL fetch FetchType EAGER B 我需要 SpringDataRes
  • 如何向 API 提供“回调”? [复制]

    这个问题在这里已经有答案了 我正在读一些模块文档在方法参数的解释中看到一些我不明白的东西 callback 将使用参数调用的回调函数 列表等于callbackargs result 计算完成后 callbackargs 回调函数的附加参数
  • 如何更改 R 中的分辨率(或重新网格)数据

    我有一个数据集 其中包含 lon lat 和涵盖 1961 年至 1970 年的月平均变量 例如温度或降水 该数据集的分辨率为 0 5 x 0 5 度经 纬度 覆盖整个地球 并以 我使用 R 提取数据的 NC 文件 library ncdf
  • 如何将控制台输出写入cpp中的文本文件?

    我正在尝试将控制台数据写入 cpp 中的单独文本文件中 任何人都可以帮我提供示例代码 有多种方法可以做到这一点 您可以使用以下命令从命令行重定向它programname gt out txt 或者你可以使用freopen out txt w
  • 制作不重叠的气泡图

    我目前正在尝试在 Matplotlib 中制作气泡图 其中气泡不重叠 因此将圆圈 气泡包装在图表中 大约像 我认为可能有效的方法 使用 x 1 y 1 绘制第一个数据点 通过计算给定标量值的气泡半径来随机绘制其他数据点以避免重叠 The f
  • 有关 JFreeChart 叠加的帮助

    我遇到了 JFreeChart 重叠图的问题 我正在使用 JFreeChart 1 0 13 我想要做的事情似乎在 JFreeChart 的早期版本中更容易做到 该图显示折线图和条形图 折线图绘制的 Y 轴数据范围为 0 100 范围 条形
  • 如何简化嵌套map调用?

    假设我有一些嵌套函子 例如List Option Int 并需要致电map最内在的一个 现在我正在使用嵌套maps scala gt val opts List Option Int List Some 0 Some 1 opts List
  • nodemailer 无效登录:535 身份验证失败

    我正在尝试在我的节点应用程序中使用nodemailer npm 包 通过联系页面发送电子邮件 它给我这个 535 身份验证失败错误 但我可以向您保证我的电子邮件和密码绝对正确 var express require express var
  • Rails 3 自动资产部署到 Amazon CloudFront?

    Rails 3 1 中是否有可用的 gem 或方法可以自动将资产上传到亚马逊云前端并使用这些资产而不是提供本地托管的资产 我想手动上传编译的资产然后更改 Rails 应用程序配置以使用该资产主机很容易 但是当修改资产时 需要再次手动上传到云
  • 设置 templateLocation 参数时数据流作业运行失败

    当我传递参数暂存 临时和输出 GCS 存储桶位置时 数据流作业失败并出现以下异常 Java代码 final String used Arrays copyOf args args length 1 used used length 1 pr
  • 防止在 Vim 中打开 NERDTree 或 MiniBuffExplorer 窗口内的文件

    我发现自己在 Vim 中打开了错误的窗口 有时是 NERDTree 或 MiniBuffExplorer 这真的让我很失望 我确信这种情况正在发生 因为我的光标错误地聚焦在这些窗口之一内 但是有什么我可以添加到我的 vimrc文件来防止这种
  • Postfix - 如何处理传入的电子邮件? [关闭]

    Closed 这个问题是无关 目前不接受答案 有人知道如何在 postfix 中处理虚拟邮箱的传入电子邮件吗 我正在构建 Web 应用程序 用户通过向应用程序发送电子邮件来添加新内容 每个用户使用的电子邮件地址是自定义的 例如 电子邮件受保
  • 在 Qt 中将 C++ 对象公开给 Javascript

    有什么方法可以将 C 对象 函数公开给 Qt 中 QtWebKit 浏览器内运行的 JavaScript 可以将 ActionScript 对象公开给在 Adob e AIR 中的 WebKit 浏览器内运行的 JS 代码 我正在 Qt 中
  • 在段落中放置表情符号而不影响“行高”

    如何在不影响段落内容的情况下插入表情符号line height不管表情有多大 IE 喜欢 我得到的最接近的是position absolute or vertical align text top 其中没有一个能完成这项工作 p img h