Pionowe wyśrodkowanie tekstu obok zdjęcia

Question

Cześć!

Mam pytanie jak w tytule tematu. Próbowałem na różne sposoby ustawić tekst, tak aby jego środek był wyrównywany do środka sąsiadującego z nim zdjęcia ale poległem. Z poradników dowiedziałem się, że aby zastosować vertical-align należy nadać divowi wyświetlanie inline lub tabeli i próbowałem nadać display block, później table i jakieś kombinacje i nic z tego.

https://jsfiddle.net/Egoiste/utqrv4so/

mógłby ktoś zerknąć i dać wskazówkę?
ps. jestem bardzo początkujący, to moje pierwsze podrygi.

Answer 1

Pewnie i o to ci chodziło http://codepen.io/jaca121212/pen/MyPYGv jeśli tak to przeanalizuj kod na spokojnie.

Answer 2

http://codepen.io/Argeento/pen/eZPmxM

Answer 3

Panowie, bardzo dziękuję!

wrócę z pracy i wezmę się za analizę Waszych kodów i komentarzy i spróbuję zastosować ze zrozumieniem.

Comments

Jaca, niestety, ale chodziło mi rozwiązanie ustawiające środek tekstu na poziomie środka zdjęcia bez względu na jego długość. Powiedzmy tekst ma dwie linijki, to te dwie linijki są na poziomie środka zdj; tekst jest dłuższy i wychodzi poza wysokość zdjęcia, to wystaje tyle samo ponad, co poniżej zdjęcia.

Argeento, o to właśnie mi chodziło, jednak nie mogę znaleźć jakiegoś prostego wyjaśnienia tego co zastosowałeś. Może to dziwne prosić o prostsze rozwiązanie w przypadku 4 lini kodu, ale może?
Jak zdjęcie bez float: sąsiaduje z tekstem. Ten align-item dotyczy każdego z elementów w divie, od p przez h, aż po zdjęcie?

---

 Może to dziwne prosić o prostsze rozwiązanie w przypadku 4 lini kodu, ale może?

Zapewne chodziło mu o to:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

(patrz na sekcję "Prefixing Flexbox")

---

Ten align-item dotyczy każdego z elementów w divie, od p przez h, aż po zdjęcie?

Dotyczy tylko elementów, które za rodzica mają .wrap (czyli div i img)

---

Hm, Twardy orzech. Trzeba pokombinować to może mi się coś rozjaśni.