在div中水平和垂直对齐图像和文本

时间:2012-02-14 05:36:42

标签: css html image vertical-alignment alignment

这个问题在互联网上泛滥成灾,但我去的每一个地方,我都没有尝试实施它。

首先是代码。 我在这上花了一个多小时,无法按照我想要的方式对齐图像。 基本上第一行的图片左对齐,文本旁边的文字,垂直居中。 接下来的“行”,图片右对齐,旁边的文字垂直居中。

Here's the jsfiddle

我在这个使用表上花了5分钟来得到它我想要它。

table jsfiddle

如果你能弄清楚如何使两者看起来完全相同,那么你就是我书中的超级巨星。如果你能解决这个问题,那么有人可以告诉我为什么在今天的CSS世界中如此难以对齐或定位文本?为什么在表上使用div?多年来,我觉得编码标准变得更加复杂。

对不起咆哮,但是因为我花时间发布这个可能会帮助别人,而不是放弃..但是,我不得不吹掉一些蒸汽:)

1 个答案:

答案 0 :(得分:2)

你想要灵活的结构,你应该使用div。因为表是固定的。例如:底部单元格应与顶部单元格具有相同的宽度。他们不能彼此不同。表格单元格链接在一起。您无法将它们分开。因此,您应该使用表格进行非常简单的设计。更清楚地说,你应该使用div来进行灵活,复杂,可靠的设计。如果你需要使用div,你应该使用div;)

你可以通过这种方式使用div做你想做的事。

http://jsfiddle.net/5aGZj/1/