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

Umieszczenie diva z napisem obok i pośrodku zdjęcia z flexboxem

VPS Starter Arubacloud
0 głosów
75 wizyt
pytanie zadane 27 listopada 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

Być może ktoś będzie potrafił pomóc. 

Zależy mi aby w div o nazwie profilefriends, 

1. Napis Friends był na górze (tak jest aktualnie)

2. Pod napisem był div, w którym zdjęcie i div o klasie "friends_name" (czyli string) wyświetlały się obok siebie a ponadto string z (friends_name) wyświetlał się po środku (na prawo od zdjęcia).

Przez ten display:flex w div o nazwie "profile_news" nic nie mogę z tym zrobić... napis wyświetla się pod zdjęciem :(

HTML
 

<div class="profilenews">
	<div class="profilefriends">
			
	       <h2>&nbsp Friends</h2>
			
			<div>
				<img src="img/ja.jpg"> 
				<div class="friends_name">Aleksander Kowalski</div>
			</div>
	</div>
			

	<div class="profileposts">
	</div>
</div>	


CSS

.profilenews
{
	display:flex;
	width:100%;
}

.profilefriends
{
 min-height:400px;
 background-color:green;
 flex:1;
 background-color:white;
 margin-right:20px;
 border:2px solid green;
}

.profileposts
{
 min-height:400px;
 background-color:blue;
 flex:2.5;
 background-color:white;
}

.profilefriends img
{
	width:70px;
	height:70px;
	object-fit:cover;
	margin:10px;
	border:2px solid yellow;
	
}

.friends_name
{
border:2px solid yellow;
}

 

1 odpowiedź

+1 głos
odpowiedź 27 listopada 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 27 listopada 2022 przez zbiku25
 
Najlepsza

2. Pod napisem był div, w którym zdjęcie i div o klasie "friends_name" (czyli string) wyświetlały się obok siebie a ponadto string z (friends_name) wyświetlał się po środku (na prawo od zdjęcia).

Jeśli dobrze zrozumiałem, to podpis zdjęcia "Aleksander Kowalski" ma znajdować się po prawej stronie zdjęcia i być wyśrodkowany w pionie? Na divie owijającym obrazek i podpis użyj: display: flex oraz align-items: center.

Poza tym, do zdjęcia z podpisem powinieneś raczej użyć znaczników figure oraz figcaption zamiast div. Obrazkowi brakuje też alternatywnego opisu.

komentarz 27 listopada 2022 przez zbiku25 Bywalec (2,940 p.)
Dokładnie o to chodziło. Dziękuję!

jeszcze pytanie techniczne - jak to jest z kaskadowaniem tego flex.

Załóżmy ze mam 3 divy

< div1>
       <div2>

                   <div3>

                    </div3>

       </div2>

</div1>

Pytanie: Jeżeli w <div1> dam display:flex; oraz align-item:center, to wszystkie divy znajdujące się wewnątrz div 1 będą miały domyślnie takie same ustawienie?
1
komentarz 27 listopada 2022 przez ScriptyChris Mędrzec (190,190 p.)

Nie. Flexbox tworzy kontener tylko dla swoich dzieci, czyli bezpośrednich potomków. W Grid można odnosić się do bardziej zagnieżdżonych potomków poprzez subgrid, ale - póki co - wspierają go tylko Firefox i Safari.

komentarz 28 listopada 2022 przez zbiku25 Bywalec (2,940 p.)
I takiego info potrzebowałem! Dziękuje :)
1
komentarz 28 listopada 2022 przez VBService Ekspert (251,170 p.)
edycja 28 listopada 2022 przez VBService

Dla ciekawostki

[ on-line ]

<div class="d1">
  <div class="d2">
    <div class="d3"></div>
    <div class="d3"></div>
  </div>
</div>
...

.d1:hover .d2 {
  display: flex;  
  justify-content: center;
  align-items: center;  
}

...

 

[ on-line ]

<section class="s1"
         data-desc="flex tylko dla kontenera d1">
  <div class="d1">
    <div class="d2">
      <div class="d3"></div>
      <div class="d3"></div>
    </div>
  </div>
</section>
<section class="s2"
         data-desc="flex tylko dla kontenera d2">
  <div class="d1">
    <div class="d2">
      <div class="d3"></div>
      <div class="d3"></div>
    </div>
  </div> 
</section>
<section class="s3"
         data-desc="flex dla kontenera d1 i d2">
  <div class="d1">
    <div class="d2">
      <div class="d3"></div>
      <div class="d3"></div>
    </div>
  </div> 
</section>
...

.s1 .d1:hover {/* flex tylko dla kontenera d1*/
  display: flex;  
  justify-content: center;
  align-items: center;  
}
.s2 .d1:hover .d2 {/* flex tylko dla kontenera d2*/
  display: flex;  
  justify-content: center;
  align-items: center;  
}
.s3 .d1:hover {/* flex dla kontenera d1 ... */
  display: flex;  
  justify-content: center;
  align-items: center;  
}
.s3 .d1:hover .d2 {/* ... i dla kontenera d2*/
  display: flex;  
  justify-content: center;
  align-items: center;  
}

...

 

1
komentarz 28 listopada 2022 przez zbiku25 Bywalec (2,940 p.)
Extra! Zuch :)

Podobne pytania

0 głosów
0 odpowiedzi 254 wizyt
pytanie zadane 8 listopada 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)
+1 głos
1 odpowiedź 723 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,320 p.)
0 głosów
1 odpowiedź 321 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez rob Bywalec (2,440 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...