jquery - div 噩梦中的垂直对齐!有什么方法可以在不知道 div 的垂直高度的情况下让它工作吗？

Question

所以我一直在努力解决一个相当奇怪的问题。我已经尝试了从 display:inline-block on span 等所有内容，将 vertical-aligns 设置为居中并在带有 display:table 和子 div 作为 table-cell 的 div 中包装，但似乎对垂直对齐没有任何影响!

我在 jsfiddle 上添加了代码:http://jsfiddle.net/rtKra/6/如果你将鼠标悬停在 li 上，你就会明白我的意思，如果 li 内容在一行上，它应该以其左侧的颜色框居中。如果它跨越两行以上，这似乎并不重要，因为 li 的顶部与上下文框的顶部对齐，而底部超出了颜色框，所以看起来不错

麻烦的部分是“labelDescriptor”div 下方的“空格”——应该与左侧的颜色框对齐。如果确实排成一行，内容仍然与 div 的顶部对齐!!

问题是悬停的背景 - 它应该与其左侧的颜色框高度相同。设置最小高度在没有表格/表格单元格显示的情况下有效，但它从内容底部到 div 底部仍然有很多空间，看起来有点不对劲。

简单的填充并不能解决问题。尽管它适用于较小的 li(内容较少)，但它会寻找那些拆分到下一行的 li!

我已经为此工作了很长一段时间，几乎要放弃了!!!我似乎什么都做不了!

我将 div 的内容包裹在 < p > 标签中，但它增加了太多空间(上方和下方)并使整个内容变得一团糟。我也不想为了它而放大字体大小。

有什么想法吗？可以使用简单的 css 修复还是必须使用 javascript/jquery？

html+css 的代码会有点太长，无法在此处发布。但如果需要的话我可以做到...

**更新:**这是它应该是什么样子的图片描述以及我能做什么(右边那个的 fiddle 网址是http://jsfiddle.net/rtKra/9/)

我希望复制左侧 gmail 标签菜单的“外观和感觉”。查看文本与“颜色框”的对齐情况(请注意，我也不需要将鼠标完全悬停在颜色框上)。中间的图像显示了对齐是如何关闭的。如果文本以 min-height:16px 的 div 为中心，它会很好地对齐。但它并没有发生，而且在视觉上看起来令人震惊。右边的图像是将字体大小更改为 16px 并将颜色框的(红色)宽度和高度设置为 1em 并将其向下移动 3px(顶部:3px)后得到的图像 - 问题仍然是这一切本可以避免首先让内容在 div 中垂直居中。因为不管元素符号中的“行数”如何，它都可以“对齐”，而不必像我所做的那样四处乱砍。希望澄清我想做什么:)

Answer 1

我想你想要一些东西like this .编辑字体大小以查看效果。

关键属性是:

.category {
    position: relative;
}
.category .labelColorPicker {
    width: 16px; 
    height: 16px; 
    border: 1px solid black;
    vertical-align: top;
    padding: 0;
    margin: 0;
}
.category .labelDescriptor {
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
    min-height: 16px;
}
.category .hoverMenu {
    position: absolute;
    left: 100%;
    top: 0;
}

在 IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0 中的 Win7 上测试。我在 CSS 中添加了两个 IE7 补丁行，因为 inline-block 在 IE7 中不能完全工作。