垂直对齐到另一个 div 的动态高度?

2024-07-04

我正在尝试将一个 div 与高度动态的相邻 div 垂直对齐。

我遇到的大多数方法都要求我知道父 div 的高度。但如果你看我的例子,就会发现是“右”div 驱动了整个部分的高度。

我试图让 div“左”中的文本垂直居中显示在右侧的 div 上。 “父”div 也没有固定的高度。

我怎样才能做到这一点,最好使用CSS?

Thanks.

我的例子:

http://jsfiddle.net/halogenmobile/McVAE/9/ http://jsfiddle.net/halogenmobile/McVAE/9/


有时 CSS 盒模型对此不起作用,因此您可以恢复到良好的老式表格模型。 (并不是说您必须调整标记)。

看一眼display: table, display: table-cell and vertical-align: middle.

我更新了小提琴:http://jsfiddle.net/McVAE/18/ http://jsfiddle.net/McVAE/18/

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

垂直对齐到另一个 div 的动态高度? 的相关文章

  • 导出/下载表 HTML-PHP 到 Excel 文件

    我有一个 HTML PHP 表格 可以从 mySQL 中提取数据 请看这里link https anakpanti com ab cargo controllers searchshipment 例如 请搜索此发货代码以获取表格内的结果 4
  • iframe 全屏在 Chrome 中不起作用?

    我正在将 Slideshare 集成到我的网站中 幻灯片演示在小窗口中运行良好 但问题是 Chrome 中没有全屏幻灯片演示 网站滑块本身以全屏显示 在 Mozilla 中它工作正常 仅 Chrome 存在问题 网站链接 http test
  • 逻辑和物理 URL

    这个问题是我之前问题的延伸 此网络服务是否安静 https webmasters stackexchange com questions 49832 what qualifies as a rest web service尝试更好地理解 R
  • 忽略页面中的 javascript 语法错误并继续执行脚本

    我为 WordPress 开发插件 它在用户端 主题 使用一些jquery作为jquery插件 问题是 当其他作者制作的其他插件出现 javascript 错误时 我的插件的 javascript 无法执行 最糟糕的是 人们认为我的插件存在
  • 当 flex-direction 为“column”时,CSS flex-basis 不起作用

    我的目标是使用 Flexbox 创建一个两列布局 其中第一列有两行 第二列有一行 如下所示 Setting flex basis 100 在第三个项目上给出了所需的效果 但仅当容器的flex direction is row 改变flex
  • 是否必须定义

    使用按钮标签时 是否必须定义 type 属性 或者仅具有语义
  • 即使列不占据整个宽度,表格也会占据整个宽度

    我有一个像这样的 HTML 表格 table border collapse collapse table thead th nth child 1 width 180px table thead th nth child 2 width
  • 用随机图像填充表格

    首先 我的编码经验包括修改简单的脚本以在我的页面上工作 其次 我搜索并发现了几个类似的问题 但无法完全解决它们 我需要一些帮助来使用大约 40 张图像数组中的随机图像填充 3x3 表 我目前有一个使用 backgroundImage 属性的
  • jquery中的ontouchstart和ontouchend?

    我目前正在对要更改触摸类的每个元素使用以下内容 ontouchstart this addClass select ontouchend this removeClass select 我想知道是否有这样的事情 element touchs
  • iPad html5 视频没有控件?

    这让我苦恼了一整天 但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作 我不想要任何控件 但如果我不包含它们 视频似乎不想播放 即使我在下面添加一些 javascript 试图强制它播放 它也适用于 iPhone 和多个浏览
  • 发送抓取请求以获取 torrent 的种子和同级

    我一直在尝试创建一个 torrent 网站 但我遇到了以下问题 如何发送 torrent 抓取请求以获取其播种者和水蛭 我有一个 PHP 类函数 它为我提供公告列表 public function getTrackers Load trac
  • 是否可以从 JavaScript 注入的内联样式中减去一个数字?

    我在 HTML 中添加了内联样式 例如style left 10px 我可以添加 减去该数字吗 我想创建一个可以删除的规则8px从该数字开始 无论该数字是多少 我尝试使用丑陋的 importanthack 来覆盖它 但是当初始值改变时这没有
  • 如何在引导程序使用jquery中单击另一个链接时更改活动类?

    我有一个 html 作为侧边栏 并使用Bootstrap ul class nav nav list li class active a href Link 1 a li li a href link2 Link 2 a li li a h
  • 使用jsoup从两个标签之间提取未识别的html内容?正则表达式?

    我想获取两者之间所有链接的名称h2那里有标签 h2 span class mw headline People span span class mw editsection span class mw editsection bracket
  • Gulp Sass - 如何正确命名输出 css?

    我正在阅读有关 sass 的教程here https scotch io tutorials getting started with sass然后我尝试了其他方法 但在本教程中无法得到答案 这就是问题所在 我的 gulpfile js 中
  • 使用 Flexbox 并保持纵横比,即使内容大小不同

    SO 有很多关于维护元素的纵横比 有或没有 Flexbox 的问题 但是 我的问题略有不同 因为我想覆盖子图像元素的纵横比 确保图像覆盖元素 object fit cover 完全地 确保元素为 1 1 即完美的圆 确保隐藏溢出的图像 换句
  • 垂直对齐到另一个 div 的动态高度?

    我正在尝试将一个 div 与高度动态的相邻 div 垂直对齐 我遇到的大多数方法都要求我知道父 div 的高度 但如果你看我的例子 就会发现是 右 div 驱动了整个部分的高度 我试图让 div 左 中的文本垂直居中显示在右侧的 div 上
  • 为移动设备设计网页界面

    如何使您的网站在标准浏览器和各种可用的移动设备上看起来都很好 目前 我尚未决定是尝试调整布局大小以使其适用于小型设备 还是为移动设备提供单独的 CSS 我的用例是一个国际象棋游戏 我希望整个棋盘都可用而无需向下滚动 你会推荐什么 基本上没有
  • 如何转义 XML 中的 & 符号,以便它们在 HTML 中呈现为实体?

    我有一些 XML 文本希望在 HTML 页面中呈现 该文本包含一个 符号 我想在其实体表示中呈现它 amp 如何在源 XML 中转义这个 符号 我试过 amp 但这被解码为实际的 符号 即在 HTML 中无效 https stackover
  • 如何在角度4中使用addHTML

    我试图在 Angular 中使用 jspdf 库的 addHTML 函数 并且已经安装了 html2Canvas 但出现错误 这是我的 demo component ts 文件 import Component OnInit ViewChi

随机推荐