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

Problem z wyśrodkowaniem i podpisem do zdjęcia

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
1,824 wizyt
pytanie zadane 19 września 2015 w HTML i CSS przez thekibi27 Bywalec (2,110 p.)

Witam!

Mam problem z wyśrodkowaniem obrazka na stronie, pomiędzy tekstem nad i pod. Chciałbym także zrobić widoczny dopisek pod obrazkiem, który będzie w mniejszą czcionką. Oto kod, który nie daje efektu, znacznik <center> pokazuje mi, że nie może zostać użyty, a align="middle" nie działa, bo pokazuje, że nie ma atrybutu align dla img.

 

 <div class="content">
             <div id=zyciorys style="float: left">
                 <h1 style="color: #c34f4f">Dzieciństwo</h1>
 
                 <p>Władysław Reymont urodził się... (tekst nad obrazkiem)</p>
 
                 <img src="img/tuszyn.jpg" alt="Miasto Tuszyn w 1942 roku" height="450px">
                 <div>Miasto Tuszyn w 1942, dzisiejszy plac Reymonta(opis obrazka)</div>
 
                 <p>Władysław był jednym z...(tekst pod obrazkiem)</p>

2 odpowiedzi

0 głosów
odpowiedź 20 września 2015 przez Czort Nałogowiec (32,580 p.)
To dlatego, że nie powinno się używać <center> w ogóle, a Ty zapewne używasz do wyśrodkowania tekstu. Zamiast <center> spróbuj dopisać w <div id="zyciorys" style="float:left; text-align:center;">, chociaż w elemencie z float:left; może przynieść nieprzewidziany skutek.

Poza tym masz sporo literówek w kodzie + nie powinno się stylować elementów inline.
komentarz 20 września 2015 przez thekibi27 Bywalec (2,110 p.)
Text-align: center też nie pomagało, ale znalazłem już na to sposób - choć nie jest on chyba najprostrzy, a raczej prowizoryczny. Wyliczyłem dokładnie margin left i right, dzięki czemu obrazek jest na środku; co mnie zdziwiło, to to, że margin-left/right: auto nie działa, ale gdy poda się konkretną wartość np. 25px to już tak.

Co do dopisku pod zdjęciem to znalazłem sposób, o który mi chodziło:

<figure> <img src="random.jpg" alt="random">

<figcaption>I tutaj wpisuje się podpisek do obrazka i jest on automatycznie w mniejszej czcionce</figcaption></figure>

O jakie literówki w kodzie Ci chodzi?
0 głosów
odpowiedź 20 września 2015 przez Janusz92 Bywalec (2,130 p.)

Czy Tobie chodzi o coś takiego?

<div class="content">
	<div id="zyciorys" style="float:left;">
		<h1 style="color:#c34f4f">Dzieciństwo</h1>
		<p>Władysław Reymont urodził się... (tekst nad obrazkiem)</p>
		<div style="width:450px; margin-left:auto; margin-right:auto;">
			<img src="img/tuszyn.jpg" alt="Miasto Tuszyn w 1942 roku" height="450px"></img>
			<p style="font-size:0.8em;">Miasto Tuszyn w 1942, dzisiejszy plac Reymonta(opis obrazka)</p>
		</div>
		<p>Władysław był jednym z...(tekst pod obrazkiem) Władysław był jednym z...(tekst pod obrazkiem) Władysław był jednym z...(tekst pod obrazkiem)</p>
	</div>
</div>

Możesz dać jakiegoś screena jak to ma wyglądać? Bo z opisu trochę ciężko wywnioskować.

Btw, na początku dobrze jest sobie wrzucać różny "background-color" na elementy blokowe strony, ułatwia to pracę i zrozumienie. No i oczywiście używanie osobnego pliku css by się przydało, to naprawdę proste.

Podobne pytania

0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 19 września w Sprzęt komputerowy przez Jerzy Początkujący (460 p.)
0 głosów
1 odpowiedź 100 wizyt
pytanie zadane 9 grudnia 2019 w JavaScript przez Nowicjusz13 Użytkownik (570 p.)
0 głosów
1 odpowiedź 167 wizyt

89,727 zapytań

138,332 odpowiedzi

309,340 komentarzy

59,649 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 429p. - Argeento
  2. 427p. - nidomika
  3. 396p. - Mikbac
  4. 392p. - ssynowiec
  5. 390p. - Łukasz Eckert
  6. 387p. - TheLukaszNs
  7. 386p. - rucin93
  8. 382p. - Michal Drewniak
  9. 382p. - Marcin Harasimowicz
  10. 378p. - JMazurkiewicz
  11. 373p. - tokox
  12. 367p. - Jarosław Roszyk
  13. 362p. - adrian17
  14. 359p. - overcq
  15. 350p. - Mawrok
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...