html - Can't find for CSS vertical align for Firefox 的解决方法

标签 html css

<分区>

我在 Firefox 中遇到 DIV 垂直对齐问题

HTML代码是:

<div class="mess"><div class="rpl"><img src="img/16.png" width="16" height="16" border="0"></div><div class="pic"><img src="img/1.png" width="100" height="100" border="0"></div></div>

CSS 看起来像:

.mess{  float:left; width:658px; border-top:1px solid #CCC;padding-top:5px; }
.rpl{ position: relative;width:19px; float:left;top: 20%;display: table-cell;   vertical-  align: middle; padding-top:20px; }
.pic{width:100px; float:left; padding-bottom:5px;margin-right:10px; }

我试图将“rpl”DIV 放在“mess”DIV 的垂直中间。 在 IE 中它看起来不错,但我无法在 Firefox 中正确使用它(总是在“困惑”div 的顶部)

我尝试使用 display: inline,display: table-cell for "rpl"DIV 但在 FF 中没有效果。

FF中DIV垂直对齐有什么解决办法吗?

最佳答案

要垂直对齐一个 div,您需要执行几个步骤

  1. 给容器 div 相同的高度和行高
  2. 给容器 div ma​​rgin :auto(你可以给 margin-left 和 margin-right 任何值。margin-top 和 margin-bottom 需要自动才能工作)。

说明:将 margin-top 和 bottom 设置为 auto 会将边距平均分配给顶部和底部。 line-height 和 height 相同时,它显示为垂直对齐。

希望对你有帮助

关于html - Can't find for CSS vertical align for Firefox 的解决方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2533842/

上一篇:css - 有没有可以从 html 文件自动创建可能的 css 规则的软件?

下一篇:php - Jquery 和 CSS 切换——这可能吗?

相关文章:

javascript - 制作圆形 LeafLet map

html - 为什么父div与 child 的高度不一样?

javascript - document.createElement ("<li>") 在 IE10 中不工作?

php - 在 HTML 表单中制作随机字段

html - 保持菜单和内容框相同的宽度

html - 在悬停时使用 CSS 变换时闪烁的 div

javascript - 对 VueJS 生命周期钩子(Hook)的误解

javascript - jQuery 自定义内容滚动条 : Can't swipe on ipad when touching scrollable area

html - 输入上方带有标签的内联 Bootstrap 表单布局

javascript - 用户查看页面后启动 CSS3 转换?