• 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

VPS Starter Arubacloud
0 głosów
2,054 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,500 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,150 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ź 1,202 wizyt
pytanie zadane 19 września 2022 w Sprzęt komputerowy przez Jerzy Użytkownik (870 p.)
0 głosów
1 odpowiedź 213 wizyt
pytanie zadane 9 grudnia 2019 w JavaScript przez Nowicjusz13 Użytkownik (570 p.)
0 głosów
1 odpowiedź 264 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

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

...