css在一个div中水平+垂直对齐3个元素

Posted 2023-03-04

【中文标题】css在一个div中水平+垂直对齐3个元素

【英文标题】：css align horizontally + vertically 3 elements wihin a div

【发布时间】：2012-04-03 05:42:38

【问题描述】：

我正在尝试在 div 中为一系列 3 个元素设置我自己的距离：

1) 一个复选框 2) 一张图片 3) 一段文字

我想要：

1) 复选框距离左边框 1 个像素 包含 div + 在中间垂直对齐

2) 图像距离复选框 1 像素 + 对齐 垂直居中

3) 文本与图像相距 1 像素 + 对齐 垂直居中

如果我使用 vertical-align middle 它可以完美对齐元素，但它不允许我水平间隔它们！

我还为 IE 或 FF 找到了很好的解决方案，但我找不到适用于所有浏览器的 1 个解决方案！

您可以在此处查看完整代码：

http://jsfiddle.net/WNeLW/

【问题讨论】：

如果我落后一些，请查看我的答案，让我知道，以便我能更好地了解您的要求。

亲爱的检查我更新的小提琴......如果你仍然面临任何问题，请告诉我......所以我可以解决你的问题......

【参考方案1】：

看看这个小提琴它可能会对你有所帮助。如果我没有给您带来问题，那么这将很有帮助。

小提琴：http://jsfiddle.net/WNeLW/1/

演示：http://jsfiddle.net/WNeLW/1/embedded/result/

在 IE6 中测试的更新代码：

小提琴：http://jsfiddle.net/WNeLW/10/

演示：http://jsfiddle.net/WNeLW/10/embedded/result/

【讨论】：

不幸的是，它适用于 FF 和 Chrome，但不适用于 IE 7 及更低版本，显示完全混乱的布局！