[CSS] Vertical Align (Non si allinea verticalmente)

Giacomo Torricelli

Nuovo Utente
25 Apr 2013
7
0
0
28
www.mumbleideas.it
Ciao a tutti,
ho questa div, imposto lo span con il numero con vertical-align:bottom, ma il numero non si mette in fondo, non cambia proprio la sua posizione... Come mai?

HTML:
<div style="background-image:url(puls.rosa.jpg); background-repeat:no-repeat; width:100px; height:75px; text-align:center;">
	<div style="vertical-align:-20px; width:80px; margin-left:10px"> 
    	<span style="font-weight:bold">POST</span><br>

		<span style="vertical-align:bottom; font-size:30px;">10</span>
    </div>
</div>
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
HTML:
<div style="position: relative; background-image:url(puls.rosa.jpg); background-repeat: no-repeat; width: 100px; height: 75px; text-align: center; background-color: #FF0000;">
	<div style="width:100px;">
	<span style="font-weight: bold;">POST</span>
	<span style="position: absolute; display: block; width: 100%; bottom: 0; font-size: 30px;">10</span>
	</div>
</div>
Il vertical-align serve solo per allineare elementi in base al testo; non il testo stesso.
 

Giacomo Torricelli

Nuovo Utente
25 Apr 2013
7
0
0
28
www.mumbleideas.it
HTML:
<div style="position: relative; background-image:url(puls.rosa.jpg); background-repeat: no-repeat; width: 100px; height: 75px; text-align: center; background-color: #FF0000;">
	<div style="width:100px;">
	<span style="font-weight: bold;">POST</span>
	<span style="position: absolute; display: block; width: 100%; bottom: 0; font-size: 30px;">10</span>
	</div>
</div>
Il vertical-align serve solo per allineare elementi in base al testo; non il testo stesso.


Ah, grazie mille...
Quindi mi consigli di fare una tabella con un height definito da me? Mi sembra l'unica soluzione per posizionare il testo in basso...
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Se usi una tabella puoi fare così:
HTML:
<table style="width:100px; text-align:center;">
	<tr><td style="background:#FF0000;">Post</td></tr>
	<tr><td style="background:#00FF00;">testo</td></tr>
	<tr><td style="background:#0000FF;">10</td></tr>
</table>

Sarebbe meglio perchè anche se le tabelle è meglio usarle per dati tabellari (per esempio listini prezzi, piatti del menu per siti di ristoranti, elenco prodotti per negozi, orari di apertura e chiusura settimanali...) in questo caso è meglio per il semplice fatto che il selettore position bisogna saperlo usare altrimenti potrebbe sfasarti parte del template.
Non che sia una soluzione inutile, è solo che dopo per ogni div bisogna assegnare il selettore position con il valore appropriato (e credo addirittura che vada messo in tutte le div della struttura).
Per farla breve?.......usa questa tabellina 1x3! XD
Ciao
 
Discussioni simili
Autore Titolo Forum Risposte Data
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
I [CSS] Galleria immagini non funziona HTML e CSS 12
M [css][php] codice php esterno non vede il css PHP 6
J XML e css XML 0
L Navbar dropdown con Bootstrap: link ai css Content Management System (CMS) 4
paloppa Bootstrap.min.css modificare il file HTML e CSS 6
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
Emix Problema con creazione form css/mobile HTML e CSS 3

Discussioni simili