gpt4 book ai didi

html - 显示 : table property in older browsers

转载 作者:行者123 更新时间:2023-11-28 01:58:50 26 4
gpt4 key购买 nike

为了垂直对齐动态文本,我使用了带有 display: table-cell 属性的 span 标签。它由具有 display: table 属性的 div 包装,并且它按应有的方式工作。

但问题是它在旧的 firefox 版本中不起作用。不幸的是,我需要 firefox 7 及更高版本的支持。

除了使用真正的 html 表格之外,还有更简单的解决方案吗?

最佳答案

display:table-cell 并不是垂直对齐的全部。仅使用 CSS 仍然可以轻松实现垂直对齐。

你需要三样东西:

  1. 具有特定高度(流体或静态,无关紧要)的包含分隔线。
  2. 具有 50% 高度的相对定位的“填充”分隔线。
  3. 您要垂直对齐的内容的容器。

但是,您需要知道内容容器的确切高度。

div#container {
height:500px;
}

div#paddingDivider {
height:50%;
}

div#contentContainer {
margin:0 auto; /* Centrally align the element */
height:100px; /* Declare the exact height of the element */
margin-top:-50px; /* Position half of the element inside the padding divider */
}

JSFiddle example .

关于html - 显示 : table property in older browsers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15242727/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com