在 div 内水平和垂直对齐图像和文本
这个问题在互联网上充斥着，但无论我走到哪里，我都无法尝试实现它。
首先是代码。 我花了一个多小时在这上面，但无法按照我想要的方式对齐图像。 本质上第一行的图片左对齐，文本在其旁边，垂直居中。 下一个“行”，图片右对齐，旁边的文本垂直居中。
我在这个使用表上花了 5 分钟，以达到我想要的效果。
如果您能弄清楚如何使两者看起来相同，那么您就是我书中的超级明星。如果你能解决这个问题，那么有人可以告诉我为什么在当今的 CSS 世界中对齐或定向文本到底如此困难吗？为什么使用 div 而不是表格？我觉得这些年来编码标准变得更加复杂。
很抱歉咆哮，但因为我花时间发布这个可能是为了帮助其他人，而不是放弃..但是，我不得不发泄一下:)
This question is flooded galore all over the internet, yet every where I go, I fail trying to implement it.
First the code.
I spent over an hour on this, and could not align the images how I wanted.
Essentially first row have picture left aligned and text next to it, centered vertically.
Next 'row', picture right-aligned, with text next to it centered vertically.
I spent 5 MINUTES on this using table to get it how I wanted it.
If you can figure out how to make the two look identical, then you are a superstar in my book. If you can solve that, then can someone please tell me why in the heck it is so freakin hard to align or orient text in the world today of CSS?? Why use divs over tables?? I feel like the coding standards have only gotten more complicated over the years.
Sorry for the rant, but since I took the time to post this to possibly help others, and not give up..yet, I had to blow off some steam :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你想要灵活的结构，你应该使用div。因为表是固定的。例如：底部单元格应与顶部单元格具有相同的宽度。他们不可能彼此不同。表格单元格链接在一起。您无法将它们分开。所以你应该使用表格来进行非常简单的设计。更明确地说，您应该使用 div 进行灵活、复杂、丰富的设计。如果你需要使用div，你应该使用div；）
你可以用div做你想做的事情，这样。
http://jsfiddle.net/5aGZj/1/
You want flexible structure,you should use the div. Because the Tables are fixed. For example: The bottom cell should have same width with the top cell. They can't be different from each other. Table cells are linked to together.You cannot separate them. So you should use tables for very simple design. To put it more clearly,You should use div for flexible,complex,veried design. If you need to use the div, you should use div ;)
you can make what you want to do with using the div, this way .
http://jsfiddle.net/5aGZj/1/