CODEWITHSUNDEEP
csshtmlimagevertical-alignmentalignment
NickG
NickG

Reputation: 901

aligning images and text horizontally and vertically within 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.

Here's the jsfiddle

I spent 5 MINUTES on this using table to get it how I wanted it.

table jsfiddle

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 :)

Upvotes: 1

Views: 7244

Answers (1)

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

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/

Upvotes: 2

Related Questions