Problem z wyśrodkowaniem i podpisem do zdjęcia

Question

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>

Answer 1

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.

Comments

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?

Answer 2

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.