div 내에서 이미지와 텍스트를 가로 및 세로로 정렬

Question

이 질문은 인터넷 전체에 넘쳐 흐릅니다. 그러나 내가가는 곳마다, 나는 그것을 구현하려고하지 않습니다.

먼저 코드를 입력하십시오. 나는 이것에 1 시간 이상을 썼고, 내가 원했던 방법으로 이미지를 정렬 할 수 없었다. 기본적으로 첫 번째 행에는 그림이 왼쪽으로 정렬되고 세로로 가운데에 텍스트가 배치됩니다. 다음 '행', 그림은 오른쪽으로 정렬되며 세로로 가운데에 텍스트가 있습니다.

Here's the jsfiddle

나는 내가 원하는 방법을 얻기 위해이 사용하는 테이블에 5 분을 보냈다.

table jsfiddle

당신은 두 개의 동일한 보이게하는 방법을 알아낼 수 있다면

는, 당신은 내 책에있는 슈퍼 스타이다. 당신이 그것을 해결할 수 있다면, 누군가가 왜 지옥에서 CSS의 오늘 세계에서 텍스트를 정렬하거나 방향을 잡기 위해 열심히 freakin입니까 말해 줄 수 있습니까 ?? 왜 테이블 위에 div를 사용합니까 ?? 나는 코딩 표준이 오랜 세월에 걸쳐 더욱 복잡해 졌다고 느낍니다.

호언 장담 죄송합니다,하지만 난 up..yet을 줄 가능성이 다른 사람들을 돕기 위해이 게시하지하는 시간이 걸렸습니다 때문에, 나는 약간의 증기 :

Answer 1

당신은 유연한 구조를 원하는를 날려 버릴 수 있었다 div를 사용해야합니다. 표가 고정되어 있기 때문입니다. 예 : 하단 셀은 상단 셀과 동일한 너비를 가져야합니다. 그들은 서로 다를 수 없습니다. 표 셀은 서로 연결되어 있습니다. 분리 할 수 ​​없습니다. 따라서 매우 간단한 디자인을 위해 테이블을 사용해야합니다. 더 명확하게 말하자면, 유연하고 복잡하며 검증 된 디자인을 위해 div를 사용해야합니다. div를 사용해야하는 경우 div를 사용해야합니다.)

div를 사용하여 div를 사용하여 원하는대로 만들 수 있습니다.

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