due span con font di dimensioni diverse

[dacanal]

Salve a tutti,
il codice che ho tra le mani è il seguente :

<p style="position: relative;width:50px;">
        <span style="font-size: 24pt;">55</span>
        <span style="position: absolute; right: 0px; bottom: 0px;line-height:24pt;">%</span>
</p>

Quello che vorrei ottenere è l'allineamento dei due testi in modo che siano sulla stessa riga. In particolare vorrei che il testo del secondo span fosse non esattamente al centro (come è adesso) ma vorrei che fosse un po' più in basso, esattamente all'altezza del testo del primo span.
Ho provato varie volte con la proprità vertical-align ma senza risultati...

Avete qualche suggerimento ?

[KillerWorm]

Ciao,
dalle tue indicazioni non si capisce cosa vuoi ottenere di preciso. Puoi postare un'immagine di quello che dovrebbe essere il risultato finale?

[Experiment8]

Ciao,

il posizionamento assoluto per cosa lo stai utilizzando? se è per cercare di allineare i testi non è un ottima idea.
ti consiglio un metodo che penso possa funzionare:

nel caso il posizionamento assoluto non servisse, puoi settare "display:block" e "float:left" per allinearli e in seguito giocare sul padding superiore per l'allineamento.

È comunque dificile capire senza un contesto del perchè sono applicati certi stili. Spero di essere stato utile :-)

[dacanal]

Grazie per le risposte, provo a spiegare meglio la situazione.

Quello che volevo ottenere è un paragrafo di lunghezza fissa, con un numero al centro (sia verticalmente che orrizontalmete) di esso e un simbolo "%" in fondo al paragrafo (ecco il perchè dell'uso del posizionamento assoluto).

Quello che mi manca è avere il simbolo "%" con la stessa baseline (linea base del font) del numero "55" : adesso la baseline di "%" è più in alto rispetto alla baseline di "55".

[Experiment8]

Non mi è ancora molto chiaro, ma se ho capito bene ti direi di togliere il line height della percentuale e dovrebbe posizionarsi in linea, altrimenti metti un botton negativo.

[dacanal]

Vi posto due immagini :

quello che ottengo con il css del primo post


quello che vorrei


Nelle due immagini ho messo un bordo blu al paragrafo, impostato una lunghezza maggiore e un font più grande per far risaltare il problema

[Experiment8]

Hai provato con un bottom negativo allo span della percentuale?
invece di bottom:0px qualcosa come bottom: -10px...

[KillerWorm]

Ciao,
hai provato a togliere line-height come ti è stato consigliato da Experiment8?

Io ho provato togliendo tutto lo style del secondo span e ottengo quello che stai chiedendo.
Il testo (nel tuo caso il carattere "%") viene allineato normalmente sulla linea base senza dover utilizzare altri posizionamenti.

<p style="width:50px;">
        <span style="font-size: 24pt;">55</span>
        <span>%</span>
</p>

Non capisco quindi a cosa possano servirti quelle regole che hai applicato.

[dacanal]

Experiment8 : ho provato un bottom negativo e in effetti funziona. Purtroppo non so come calcolare il valore bottom da impostare in funzione dei font utilizzati ? Ho provato la differenza tra i due font diviso due, ma non è corretto...

KillerWorm : togliendo tutto come hai consigliato ho l'effetto indesiderato che il valore "%" si affianca al "55", mentre io vorrei che il "%" stia incollato al bordo destro del paragrafo. Se guardi le due figure che avevo postato si vede che il "%" è sulla parte destra del




Grazie comunque per l'attenzione

[KillerWorm]

Non avevo afferrato che tu volessi allineare il secondo span a destra del paragrafo. Ora ho capito il problema.

Utilizzando il posizionamento, come hai fatto tu, potrebbe andare bene ma ovviamente perdi ogni riferimento al base-line come tu stesso hai riscontrato. In questo caso dovresti giocare con i padding, come ti aveva suggerito Experiment8, o posizionare ad hoc i due span.

Una soluzione alternativa potrebbe essere quella di impostare un allineamento giustificato per il paragrafo, in modo che il testo venga distribuito per tutta la lunghezza del paragrafo stesso, distribuendo automaticamente lo spazio tra le parole. Da qui nasce un ulteriore problema dovuto al fatto che non è così semplice giustificare una riga singola di testo. Ad un problema simile ho risposto proprio qualche post fa in quest'altra discussione.

Ecco un esempio per il tuo caso:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CSS - one line justify</title>
  <style type="text/css">
    p {
      border:1px solid red;
      
      width:100px;
      height: 24pt;
      line-height: 24pt;
      text-align: justify;
      text-align-last: justify; /* IE */
    }
    p:after {
      content: "";
      display: inline-block;
      width: 100%;
    }
    p>span:first-child {
      font-size: 24pt;
    }
  </style>
</head>
<body>
  


    <span>55</span>
    <span>%</span>
  </p>
</body>
</html>

In questo modo non perdi il riferimento al base-line del testo e non hai bisogno di impostare posizionamenti particolari.