如何让文字接触到div的底部

2023-11-29

我有一个包含较大文本元素的 HTML 页面。我希望文本与包含的 div 的底部对齐,以便它接触到 div 的底部。

我尝试跟随,但文本和底部之间仍然有一些空格。有什么方法可以删除这个空格并使文本接触底部吗?

Here是我尝试过的活生生的例子。

<html lang="en">
<head>
    <style type="text/css">
        .bottomAlignedText {
            position: relative;
        }
        .bottomAlignedText span {
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
    <span style="font-size:300px;">Test</span>
</div>
</body>
</html>

你可以这样做line-height

.bottomAlignedText {
  position: relative;
}
.bottomAlignedText span {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 0.7;
}
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
    <span style="font-size:300px;">Test</span>
</div>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让文字接触到div的底部 的相关文章

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

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

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 如何将 HTML 转换为 Markdown?

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu
  • 链接无效

    我正在尝试使用以下命令创建一组指向页面中特定部分的链接 a href 符号 但它似乎不起作用 点击链接似乎没有任何反应right click gt open in a new tab更改 url 但不会移动到页面的其他部分 我使用的是火狐浏
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 如何使自定义 Web 组件可聚焦?

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • 将 XSL-FO 转换为 HTML

    我有一组用于 PDF 生成的 XSL FO 文档 我还需要将相同的输出数据 PDF 格式 导出为 HTML 文件 此外 我需要 HTML 具有与 PDF 类似的样式 有没有办法使用 C 将 XSL FO 转换为 XHTML NOTE 我知道
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求

随机推荐

  • Excel UDF 到表中的数据块的逆透视(融化、反向透视、展平、标准化)

    这个问题将寻求多种方法LET LAMBDA VBA UDF and Power Query Function 因此不会有单一的正确答案 而是征集可供参考的方法 Scott提出了一个问题here关于反转包含数据块而不是单个数据点的复杂表 基本
  • 无法在 Angular 6 中添加 Bootstrap 4

    当我尝试添加最新的引导程序版本时遇到问题 npm install bootstrap 之后 当我尝试运行它时收到一条错误消息 ng serve open 我在 angular json 中添加 Bootstrap 像这样 styles no
  • Xamarin Forms PopAsync 崩溃

    我用 PCL 构建了一个 Xamarin 表单应用程序 应用程序有时会崩溃await Navigation PopAsync 我找到了这个https forums xamarin com discussion 62414 app resum
  • 通过分隔符将 T-SQL 字符串拆分为列?

    我有一个表 其中有一列使用连字符分隔的八个值集 其中一些为空白 我试图将此字符串拆分为列 每个值对应于分隔字符串的位置 Table1 Record StringValue rec1 422100 130 1034 10901 12000 r
  • 如何查看活动的 SQL Server 连接?

    我正在使用 SQL Server 2008 Enterprise 我想查看任何活动的 SQL Server 连接 以及所有连接的相关信息 例如来自哪个 IP 地址 连接到哪个数据库等等 是否有现有的命令可以解决这个问题 SELECT DB
  • 如何使用分类轴在条形图上叠加数据点

    Goal 我正在尝试使用 Seaborn 在带有多个分组条形图的图中显示各个数据点 Problem 我尝试使用条形图的猫图和各个数据点的猫图来完成此操作 但是 这会生成 2 个数字 一个包含条形图 另一个包含各个数据点 问题 有没有办法使用
  • 如何制作非矩形Winform?

    我正在使用下面的代码来更改 winform 的形状 它正在改变形状 但不是我想要的那样 我需要表格有弯角 我应该使用什么积分来获得它 public void MakeNonRectangularForm var p new Graphics
  • ms-access加载数据问题

    我有一个非常复杂的表格 如下所示 替代文本http img9 imageshack us img9 2465 test2xk jpg 然而 我的数据库中总共只有 8MB 的数据 它的工作方式是用所有记录名称一直填充左侧的列表框 当您滚动记录
  • 使用 SCALER_CROP_REGION 裁剪时 Camera2 预览会拉伸

    我想在以下位置显示预览全屏使用camera2 API 我选择的相机尺寸是4160x3120 16 9 我的屏幕是1080x1920 9 16 因此 如果我希望预览正确缩放 我必须裁剪相机输出 Rect zoomCrop new Rect 0
  • C4 保存图像的一部分

    嘿 我浏览了保存图像的示例 然后我只想保存屏幕的一部分 我设法保存从图像左上角开始的部分 但实际上我想保存屏幕的中心 仅保存图像的一部分的神奇之处在于设置具有特定大小的图形上下文 如下所示 UIGraphicsBeginImageConte
  • 从绑定项获取 ItemsControl 内的 DataGrid

    我有一个 ItemsControl 在其模板中使用 DataGrid 如下所示
  • Java正确处理异常

    对JAVA或异常处理不太熟悉 寻求一些关于什么是可以接受的 什么是不受欢迎的建议 该场景 我正在构建一个生命游戏程序 我设置了条件来检查单元格是否超出范围 并且不尝试访问该 单元格 我的问题是 使用 try catch 块代替 8 个条件是
  • 相对于页面上滚动位置的视觉计数器

    对于一个项目 我必须使用 html 和 javascript 制作一个可视计数器 相对于窗口的滚动位置从 150 倒数到 0 我不完全确定我应该如何去做这件事 但这是我到目前为止所拥有的 HTML span class meterCount
  • Nginx 位置指令中子目录的正则表达式或通配符

    我的开发人员将在本地计算机上编辑多个 Wordpress 站点 我想为他们设置一次 Nginx 而无需他们将来编辑配置文件 通常 当 Nginx 配置为托管 Wordpress 时 会包含如下位置块 location try files u
  • file_put_contents() 在尝试导出图像时发出错误

    我通过将多个图像复制到新图像中来创建图像 在程序的最后一步中 我尝试将此文件导出到文件夹中 代码如下
  • 获取互斥体后调用await操作[重复]

    这个问题在这里已经有答案了 如何使用写入文件await FileIO WriteTextAsync 在 Windows Phone 8 1 中 获取后mutex这样就不会有两个线程访问同一个文件并确保互斥 我正在执行以下操作 mutex W
  • jQuery Mobile Cordova (Phonegap) 在每个页面底部留下空白

    对于我的每个 jQm 页面 每个页面的底部似乎都有一些空白 并且它无缘无故地添加了滚动行为 我已附上屏幕截图 这种不必要的滚动行为给我带来了很多麻烦 我检查了firebug中的页面 似乎jQm正在添加 min height 213px 到页
  • 不带正则表达式的 String.replaceAll

    我想替换字符串中子字符串的所有实例 但是String replaceAll 只接受一个模式 我从上一场比赛中获得的字符串 是否可以将转义添加到我拥有的模式中 或者是否有一个版本replaceAll 在另一个接受文字字符串而不是模式的类中 只
  • Matlab uint8 稀疏

    在 Matlab 中创建稀疏矩阵时 您似乎可以创建一个填充逻辑数或双值数的稀疏矩阵 在阅读周围内容时 我了解到 Matlab 不支持其他类型的稀疏矩阵 即uint8或其他整数 在我的应用程序中我知道max values 16 而记忆是至关重
  • 如何让文字接触到div的底部

    我有一个包含较大文本元素的 HTML 页面 我希望文本与包含的 div 的底部对齐 以便它接触到 div 的底部 我尝试跟随 但文本和底部之间仍然有一些空格 有什么方法可以删除这个空格并使文本接触底部吗 Here是我尝试过的活生生的例子