allineamento testo in un bottone

[dannie]

Scusate la domanda molto da newbie ma...
Ho definito nel mio foglio di stile:

.button1 {width: 50px; height: 30px; background-color: #00FF00; border-style: outset; FONT-WEIGHT: bold;  FONT-SIZE: 20pt;  COLOR: #000000;  FONT-FAMILY: Courier;}

che poi uso così:

<button class='button1'>OK</button>

Il mio problema è che vorrei che il testo fosse centrato nel bottone, sia orizzontalmente che verticalmente, mentre viene visualizzato nella parte bassa del bottone... come posso forzare l'allineamento verticale? :master:
Dopo aver cercato in questo forum ho provato ad aggiungere line-height o vertical-align ma non sembrano avere effetto....

[pierofix]

Prova con questo:

.button1 {
   width:50px; height:30px; line-height:30px;
   text-align:center;
   background-color:#0f0;
   border-style:outset;
   font:bold 20pt Courier;
   color:#000;
}

P.S. Sicura che il contrasto tra colore di sfondo e colore del testo sia sufficiente?

[dannie]

Non cambia nulla: il testo continua ad essere centrato orizzontalmente ma posizionato nella parte bassa del bottone....

P.S. Sicura che il contrasto tra colore di sfondo e colore del testo sia sufficiente?

Beh.... nero su verde fosforescente direi di sì....

[pierofix]

Originariamente inviato da dannie
il testo continua ad essere centrato orizzontalmente ma posizionato nella parte bassa del bottone....

Ehm... ... ma sei sicura della dimensione che hai dato al testo del pulsante? Non vorrei che fosse più grande dell'altezza del bottone.

Prova, per sfizio, a dare altezza bottone e interlinea 100px e facci sapere.

[dannie]

HAI RAGIONE!
Infatti il tuo codice (e anche il mio iniziale) con dimensione del bottone 100 funziona perfettamente, così come con dimensione 30 e size del testo 18pt (ma porc... 2pt... ci vuole pure un po' di sfiga però...)
Non ci avevo nemmeno pensato perchè avevo usato altezza del bottone 30 e quindi credevo che dimensione del testo 20 fosse ragionevole.....
Grazie mille per l'aiuto!!!!!

[pierofix]

Originariamente inviato da dannie
Grazie mille per l'aiuto!!!!!

Eh, le sviste sono inevitabili: succedono.

Pensa che l'altro giorno, causa un segno sbagliato in un ciclo for, avevo due pagine che si reindirizzavano a vicenda, creando un ciclo infinito (moto perpetuo ) e ovviamente sul browser non vedevo un tubo. Ci ho messo un bel po' prima di capire il problema e ho perso ore preziose di sonno.

Alla prossima.

[dannie]

Ok, riprendo questo post perchè proseguendo nel lavoro ho trovato un altro problema....
Nella pagina che sto sistemando ci saranno molti bottoni, di diversi colori e con diverse scritte; grazie all'aiuto di stamattina di pierofix, mi è facile gestire i vari casi con il foglio di stile.... tutti tranne uno: dovrei simulare una croce sul bottone.... precedentemente questo caso era gestito con un'immagine ma mi piacerebbe -se possibile- uniformarmi con il resto della pagina e inserire un bottone con una X sufficientemente grande da coprire tutto il bottone. Il problema è simile a quello di stamattina: il testo comprende un certo spazio vuoto sopra e sotto le lettere per cui, se ingrandisco troppo la dimensione del testo, ottengo semplicemente che esso viene tagliato verso il basso, ma lo spazio vuoto in alto resta... (allego un'immagine per farvi capire cosa intendo: in questo caso ho messo

<button class='button1'><font style='border: 1px black solid; font-size: 30px;'>X</font></button>
<button class='button1'>X</button>

evidenziando cioè il bordo per farvi capire cosa intendo)

Quindi la domanda è: si può togliere lo spazio vuoto o no?

[pierofix]

Originariamente inviato da dannie
Quindi la domanda è: si può togliere lo spazio vuoto o no?

Mi sa di no. Tu devi per forza avere il pulsante alto 30px? Se così non fosse potresti usare un'altra tecnica, ovvero quella dei padding verticali. Mi spiego meglio:

.button1 {
   width:50px;
   padding:5px 0;
   text-align:center;
   background-color:#0f0;
   border-style:outset;
   font:bold 20px Courier;
   color:#000;
}

[dannie]

Non ho capito molto bene....
I bottoni non devono necessariamente essere alti 30, posso anche variare leggermente, quello che mi servirebbe ottenere è che la X attraversi tutto il bottone, cioè che tocchi sia il bordo in alto che quello in basso, senza spazi vuoti... ma mi sa che non si può ottenere... o no?
Eventualmente è possibile metterla su un altro div sovrapposto al bottone? In pratica vorrei evitare di ricorrere a un'immagine, visto che nella pagina ce ne saranno parecchi e non vorrei quindi si appesantisse troppo....

[pierofix]

Aaaaaaaahhh! Tu vuoi che NON ci siano spazi... scusa, non mi era chiaro.

Bè, in questo caso la vedo molto dura. A parte che certe pretese non sono molto sane , nell'ottica della nuova filosofia di progettazione, a questo punto direi che la cosa "migliore" sia usare un'immagine, ovviamente addobbata con il dovuto testo alternativo.