• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pionowe wyśrodkowanie tekstu obok zdjęcia

0 głosów
95 wizyt
pytanie zadane 27 kwietnia 2016 w HTML i CSS przez Egoist Nowicjusz (220 p.)
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.

3 odpowiedzi

0 głosów
odpowiedź 27 kwietnia 2016 przez jaca121212 Nałogowiec (33,450 p.)
Pewnie i o to ci chodziło http://codepen.io/jaca121212/pen/MyPYGv jeśli tak to przeanalizuj kod na spokojnie.
0 głosów
odpowiedź 27 kwietnia 2016 przez Argeento Maniak (63,270 p.)
0 głosów
odpowiedź 28 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
Panowie, bardzo dziękuję!

wrócę z pracy i wezmę się za analizę Waszych kodów i komentarzy i spróbuję zastosować ze zrozumieniem.
komentarz 28 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
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?
komentarz 28 kwietnia 2016 przez Krzycho92 Maniak (60,140 p.)

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

komentarz 28 kwietnia 2016 przez Argeento Maniak (63,270 p.)

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)

komentarz 28 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
Hm, Twardy orzech. Trzeba pokombinować to może mi się coś rozjaśni.

Podobne pytania

0 głosów
4 odpowiedzi 223 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez redstar1 Bywalec (2,110 p.)
0 głosów
2 odpowiedzi 96 wizyt
pytanie zadane 5 września 2016 w HTML i CSS przez schumix Nowicjusz (240 p.)
+1 głos
1 odpowiedź 73 wizyt
pytanie zadane 8 kwietnia w HTML i CSS przez Jonki Mądrala (5,760 p.)
...