Jak ustawić tekst pod obrazkiem w html5 i css3?


(aktywny27) #1

Umiem ustawić obrazek po prawej stronie czy po środku ale jak zrobić żeby pod obrazkiem był tekst.Proszę o pomoc


(krystian3w) #2

Tekst pod obrazkiem:

<img src="..." alt="..">
<p> jakiś tekst </p>
<img src="..." alt=".."><br>
jakiś tekst 

http://www.kurshtml.edu.pl/html/figcaption,html5.html - grafika z podpisem

<figure>
	<img src="42.jpg" alt="Liczba 42">
	<figcaption>Sens życia, wszechświata i w ogóle ;-)</figcaption>
</figure>

wyśrodkowanie, do prawej:


(aktywny27) #3

Oto mi chodzi tak jak na tej stronie:

http://www.galeria.moja-ostroleka.pl/


(krystian3w) #4

Oni są 10 lat do tyłu używają tabel w tabeli (sic!).


(aktywny27) #5

To ma być bez tabeli i to ma być jedno zdjęcie obok drugiego w tle i tekst pod obrazkiem


(krystian3w) #6

html
<p>Pulpit Rock to masywne urwisko o wysokości 604 metrów nad Lysefjorden, naprzeciwko płaskowyżu Kjerag w Forsand, w Ryfylke w Norwegii. Szczyt klifu ma około 25 na 25 metrów (82 stóp kwadratowych) i jest prawie płaski, a jest słynną atrakcją turystyczną w Norwegii.</p>
<div>
   <figure>
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure  class="center">
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure>
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure  class="center">
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure>
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure  class="center">
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure>
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure  class="center">
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
   <figure  class="center">
      <img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock">
      <figcaption>Fig.1 - Widok skał ambony w Norwegii.</figcaption>
   </figure>
</div>
css
figure {display: inline-block}

figcaption {width: 140px}

img {width: 140px}

div {border: 2px solid #bbb; border-radius: 8px}

:heavy_minus_sign: problem z wyśrodkowaniem - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.w3schools.com/css/css3_flexbox.asp