• 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

VPS Starter Arubacloud
0 głosów
1,059 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 (40,760 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 niezalogowany
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 ScriptyChris Mędrzec (190,190 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 niezalogowany

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
2 odpowiedzi 454 wizyt
pytanie zadane 5 września 2016 w HTML i CSS przez schumix Początkujący (330 p.)
0 głosów
4 odpowiedzi 12,043 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez redstar1 Bywalec (2,200 p.)
0 głosów
1 odpowiedź 994 wizyt
pytanie zadane 8 kwietnia 2017 w HTML i CSS przez Jonki Dyskutant (8,180 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...