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

Question

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;
}

 

Answer 1

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.

Comments

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?

---

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.

---

I takiego info potrzebowałem! Dziękuje :)

---

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;  
}

...

 

---

Extra! Zuch :)