Problema allineamento testo

**Sages** · 04-02-2010, 11:59

Ciao a tutti! Mi sono da poco avvicinato al CSS e sto seguendo la guida base presente su HTML.IT, ma nel fare qualche prova per impratichirmi mi sono trovato difronte ad un problema che non riesco a capire.

codice:

/*stilenuovo.css*/

body { 
	font-family: Arial; 
	font-size: 10pt;
	background-color:#f7f7f7;
	color: #F00;
}

pre {
	border: 1px #999 dashed;
	background-color: transparent;
	margin: 0px auto 0px auto;
	padding:5px;
	color: #0F0;
	overflow: auto;

	font-family:"Courier New", Courier, monospace; 	font-size:90%; font-weight: normal;
}

/*test*/
span:first-child {
	background-color:#eee;
	color: #C03;
}

#span1 {
	
	text-decoration:blink;
	text-align:center;
}

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<link rel="stylesheet" type="text/css" href="stilenuovo.css" />


<title>Background image | Guida CSS di base | CSS.HTML.it</title></head>
<body>

<h1>Background image</h1>



Un'immagine di sfondo applicata nel modo tradizionale si estende a tutta la pagina.</p>



Ecco il codice :</p>

<div class="boxcode">
	<pre>
ok ok ok
		<span id="span1">aaa</span>
		<span>bbb</span>
	</pre> 
	


		<span>bbb</span> 
	</p>
</div>
<div>
	<span id="span1">bbb</span>
</div>
</body>
</html>

Teoricamente, per quel che ho visto fino ad ora, gli "span" con id "span1" dovrebbero avere testo centrato, avendolo espressamente dichiarato nel CSS, mentre così non è. Il testo è sempre allineaeto secondo quanto stabilito nell'elemento "pre"(in questo caso a sinistra, secondo regola di default). Le altre proprietà vengono modificate(colore sfondo, colore testo, decorazione), mentre l'allineamento del testo no.

Presumo sia una cosa banale, ma non riesco proprio a capirla

Vi ringrazio anticipatamente dell'aiuto.

Saluti

**Cimp** · 04-02-2010, 12:09

Il problema è che tu centri il conetnuto del tag span
Peccato che span sia l'area più piccola possibile, quindi il suo contenuto stesso.
Centrarlo, allinearlo a sinistra o a destra non farà alcuna differenza: nonnc'è spazio tra span e il suo contenuto. per capire il problema, prova a fare qunato segue in una pagina html e nota cosa succede se cerchi di centrare quello che è dentro ai bordi:

questo testo è prima dallo span <span border=1>questo testo è dentro</span>questo segue lo span

ora la stessa cosa con un div (che invece è un'area che di default occupa il massimo possibile

questo testo è prima del div <div border=1>questo testo è dentro</div>questo segue il div

quindi se vuoi centrare, metti pure lo span, ma dentro un altro contenitore (ad es un div) e attribuisci la centratura al contenitore esterno

**Sages** · 04-02-2010, 12:14

Non ho ben capito l'esempio, comunque hai risolto perfettamente il mio problema. Non sapevo che l'area dello span fosse pari al suo stesso contenuto. Ho già provato sostituendo un paragrafo e il testo si è spostato.

Grazie mille

EDIT:

Scusa non avevo letto il tuo edit. Cioè intendi così:

codice:

<p class="test">
		<span>bbb</span> 
	</p>

codice:

.test{
	text-align:right;
}

Se intendevi questo, cioè settare nel contenitore di span l'allineamento, allora non me lo prende. Se intendevi un altro metodo allora non ho capito

-------------

EDIT 2: Niente, tutto a posto. Funziona anche con Paragraph.

Ciao

**Cimp** · 04-02-2010, 12:52

riprova

codice:

<html>
	<body>
		
	<div style="text-align:center; border: 1px solid #000000;">
		<span>sto centrato?</span>
	</div>	
<p style="text-align:center; border: 1px solid #000000;"> <span>sto centrato?</span>
	</p>
	</body>
</html>

Discussione: Problema allineamento testo

Strumenti discussione

Ricerca discussione

Visualizza

Problema allineamento testo

Span vs div vs...

riprova...opps non ho visto che avei già sistemato

Permessi di invio