Jak wycentrować <div> zawierający <span> z {float:left} i paragra?

Hej, chcialbym za pomoca CSS polaczyc span i p w jeden p. Historia jest taka ze chce uzytkownikowi pozwolic dodac figcaption do figure, ale dodatkowo chcialbym osobno dodac do tego figcaption (ktore bedzie jednym paragrafem wpisanym przez uzytkownika) dodac dodatkowo na samym poczatku liczbe grafiki (np. Rys 1. ). Dodatkowo figcaption ma byc wysrodkowane. Probowalem to osiagnac z float:left na spanie ale wtedy nie jestem w stanie wysrodkowac caego figcaption (lacznie z p). Tutaj jest DEMO: https://codepen.io/degel123/pen/BabJWxz. Wolalbym to rozwiazac wylacznie przy pomocy CSS

Probowalem tez z flex ale wtedy z jakigos powodu dostaje dwie linie tekstu zamiast zmiescic wszystko w jednej: https://codepen.io/degel123/pen/vYPpxzY

chodzi ci o dopisanie do

<figcaption style="flex justify-center">

@Autysta: ale wtedy jesli opis jest dluzszy niz jedna linia to nieladnie rozbija ten span i przestaje to byc widoczne jakby to byla jedna linia: https://codepen.io/degel123/pen/BabJWxz

Kokos12345 napisał(a):

ale wtedy jesli opis jest dluzszy niz jedna linia to nieladnie rozbija ten span i przestaje to byc widoczne jakby to byla jedna linia: https://codepen.io/degel123/pen/BabJWxz

A jak to ma wyglądać? nie mieści się to w następnym wierszu czy ma się zwinąć, czy uciąć.
Nie rozumiem, mozna też style="width 100px" dodać czy coś to wymusisz określoną szerokość spanu, są też atrybuty overflow: zachowanie gdy tekst się nie mieści w elemencie.

Autysta napisał(a):

Kokos12345 napisał(a):

ale wtedy jesli opis jest dluzszy niz jedna linia to nieladnie rozbija ten span i przestaje to byc widoczne jakby to byla jedna linia: https://codepen.io/degel123/pen/BabJWxz

A jak to ma wyglądać? nie mieści się to w następnym wierszu czy ma się zwinąć, czy uciąć.
Nie rozumiem, mozna też style="width 100px" dodać czy coś to wymusisz określoną szerokość spanu, są też atrybuty overflow: zachowanie gdy tekst się nie mieści w elemencie.

Jesli span + p nie mieszcza sie w wierszu, to tylko p powinienen zostac rozbity na dwa wiersze a nie zarowno span jak i p jak sie dzieje teraz z uzyciem flex. I span zawsze powinien byc przyklejony do poczatku p

Możesz dodać jeszcze flex-wrap, to jeśli elementy span i p nie będą się mieściły w 100px, to następny element pójdzie do nowego wiersza.
Gdzie przy samym width 100px to dalej by były w jednym wierszu span i p, ale text nie mieszczący się by przeszedł do następnego wiersza.

I do span możesz dodać styl white-space:nowrap;

@Autysta troche juz sie pogubilem :D figcaption powinien miec width: 100%. span powinien miec szerokosc taka jak jego zawartosc czyli Rys 1. p moze miec dowolna szerokosc i ma sie rozbijac na wiele linii jesil jest zbyt dugi. figcaption ma byc wysrodkowany. Tutaj jest moj kod, dalbys rade wproawdzic zmiany o ktorych mowisz zeby potwierdzic ze faktycznie dziaaja?
https://codepen.io/degel123/pen/BabJWxz

Wynik powinen wygladac tak ze span czyli czerwony tekst Rys. 1 jest przyklejony od lewej strony do poczatk p (To jest...) i tylko p rozbija sie na wiele linii jesli tekst jest zbyt dlugi.

@Autysta twoj efekt wyglada tak:

Podczas gdy powinien wygladac bardziej tak:

Tutaj jest kod ktorym to uzyskalem: https://codepen.io/degel123/pen/vYPpdVm Jedyna wada jest taka ze ten float:left element jest zawsze po lewej stronie, i gdy tekst jest za krotki to wyglada to zle:

Jakies sugestie co mozna poprawic zeby jakos przykleic ten span do p?

Nie masz tam nigdzie zdefiniowanego rozmiaru kontenera więc tekstu byś musiał tyle nawalić ile się zmieści na ekranie.
Czyli możesz tam ustawić width taki żeby przy opis opis przeszło do nowej linii.

i do p znacznika możesz dodać text-align:center, żeby opis opis w następnym wierszu był na środku.

<figure><div class="mx-auto max-w-full" style="width: 100px;"><img class="w-full" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"></div><figcaption class="w-full italic mx-auto flex justify-center" style="width: 1025px"><span class="float-left text-red-500" style="white-space:nowrap">Rys. 1</span><p style="text-align: center">To jest sda dsa das das dasd asd asdfsdf sf sdfsd fsd fsd fsd fsd fds  sdf sdfsdfsd fsdf f fsd fsd fsd fsd fsdf sdf sdf sfd sd fsd fsd fsd fsd fsd f s  opis opis opis opis </p></figcaption></figure>

Chyba, że chcesz żeby to się kurczyło gdy zmieniasz rozmiar przeglądarki to wtedy bez tego width.

<figure><div class="mx-auto max-w-full" style="width: 100px;"><img class="w-full" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"></div><figcaption class="w-full italic mx-auto flex justify-center" style=""><span class="float-left text-red-500" style="white-space:nowrap">Rys. 1</span><p style="text-align: center; word-wrap: normal">To jest sda dsa das das dasd asd asdfsdf sf sdfsd fsd fsd fsd fsd fds  sdf sdfsdfsd fsdf f fsd fsd fsd fsd fsdf sdf sdf sfd sd fsd fsd fsd fsd fsd f s  opis opis opis opis </p></figcaption></figure>

Nie używaj {float}.

@Autysta teraz to wyglada tak:

Chcialbym zeby ten tekst przsunal sie pod "Rys. 1" jak wskazuja strzalki zeby nie miec takiej pustej przestrzeni. Da sie to zrobic?

Na ten moment wydaje mi sei ze jednak mimo wszystko bede musial ingerowac w dom czyli dodac do p jako pierwsze dziecko span i wtedy bedzie dzialalo. Ale mialem nadzieje ze CSS tez da rade

Tak?

<figure><div class="mx-auto max-w-full" style="width: 100px;"><img class="w-full" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"></div><figcaption class="w-full italic mx-auto flex justify-center" style=""><div><span class="float-left text-red-500" style="white-space:nowrap">Rys. 1</span><p style=" word-wrap: normal">To jest sda dsa das das dasd asd asdfsdf sf sdfsd fsd fsd fsd fsd fds  sdf sdfsdfsd fsdf f fsd fsd fsd fsd fsdf sdf sdf sfd sd fsd fsd fsd fsd fsd f s  opis opis opis opis </p></div></figcaption></figure>

Autysta napisał(a):

Tak?

Kopiuj

<figure><div class="mx-auto max-w-full" style="width: 100px;"><img class="w-full" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"></div><figcaption class="w-full italic mx-auto flex justify-center" style=""><div><span class="float-left text-red-500" style="white-space:nowrap">Rys. 1</span><p style=" word-wrap: normal">To jest sda dsa das das dasd asd asdfsdf sf sdfsd fsd fsd fsd fsd fds  sdf sdfsdfsd fsdf f fsd fsd fsd fsd fsdf sdf sdf sfd sd fsd fsd fsd fsd fsd f s  opis opis opis opis </p></div></figcaption></figure>

Tak, z ta roznica ze obecnie p jest rozbijany na dwie linie mimo ze jest miejsce w pierwszej linii:

Po dopisaniu kolejnych slow, pierwsza linia sie rozszerza ale w drugiej linii zawsze jest troche slow o szerokosci mniej wiecej jak "Rys 1.". Da sie to naprawic?

A naprawdę nie możesz tego span mieć jako dziecka w p elemencie?

Bo flex wymusza na kontenerach pewne ustawienie i to trochę komplikuje wszystko
Więc najprościej po prostu tego span przełożyć w hierachi dom.

<figure><div class="mx-auto max-w-full" style="width: 100px;"><img class="w-full" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"></div><figcaption class="w-full italic mx-auto flex justify-center" style=""><p style=" word-wrap: normal;"><span class="float-left text-red-500" style="white-space:nowrap;">Rys. 1</span>To jest sda dsa das das dasd asd asdfsdf sf sdfsd fsd fsd fsd fsd fds  sdf sdfsdfsd fsdf f fsd fsd fsd fsd fsdf sdf sdf sfd sd fsd fsd fsd fsd fsd f s  opis opis opis opis </p></figcaption></figure>

Tak bede musial zrobic, ale dzieki wielkie za pomoc!