Altezza della linea uguale con larghezza del bordo variabile (border box)

In questo esempio semplificato ho 4 cerchi, ognuno con larghezza del bordo variabile e sto cercando di mantenere un'altezza della linea uguale in ciascuno per mantenerli allineati orizzontalmente.Altezza della linea uguale con larghezza del bordo variabile (border box)

Tuttavia la larghezza del bordo sembra effettuare l'altezza della linea (pur essendo tecnicamente fuori della scatola?)

Esiste comunque per risolvere questo senza regolare manualmente ogni linea-altezza?

width: 50px; 
height: 50px; 
border-radius: 50px; 
border: 1px solid #1daeec; 
line-height: 50px;

Esempio: http://jsfiddle.net/vcJ3G/

fonte

2013-08-07 Titan

bella domanda, penso che dovremmo usare jQuery per fare, perché anche ponendo come% di valore, abbiamo sempre un offset, saremo in grado di eludere il confine e vedo che il jQuery per fare questo http://jsfiddle.net/vcJ3G/1/ o aggiungere classe per variare l'altezza della linea – artSx

Quando imposti il 'dimensionamento della scatola: border-box' t il confine non è più tecnicamente fuori dagli schemi. Viene quindi incluso all'interno della larghezza definita per la casella. Vedi https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

Tutto questo può essere evitato se invece si utilizza 'box-shadow': D –

È possibile rimuovere il line-height, utilizzare display:table-cell invece, e aggiungere vertical-align:middle; alla classe stat.

jsFiddle example

.stat { 
    display: table-cell; 
    width: 50px; 
    height: 50px; 
    border-radius: 50px; 
    border: 1px solid #1daeec; 
    text-align: center; 
    margin: 10px; 
    font-size: 16px; 
    color: #1daeec; 
    text-transform: uppercase; 
    vertical-align:middle; 
}

fonte

2013-08-07 14:58:01 j08691

Oggi ho imparato qualcosa, grazie! – artSx

Bel grazie, tendo ad evitare il table-cell a causa di IE7, ma posso scegliere di ignorarlo per questo progetto. – Titan

il CSS funziona bene tutto quello che dovete fare è rimuovere alcuni da parte superiore

* { 
    margin: 0px; 
    padding: 0px; 

}

http://jsfiddle.net/techsin/vcJ3G/15/

fonte

2013-08-07 15:18:25

Non ho detto che dovevo mantenere la stessa altezza su tutti i cerchi, quindi l'uso del border-box. Sei corretto senza quella spiegazione, anche se così grazie. – Titan

sono imbattuto in questo e mi pensato come è possibile farlo senza usare table-cell, la mia soluzione probabilmente non è la migliore, ma decido condividerlo comunque. http://codepen.io/svdovichenko/pen/rObzqM?editors=110

aggiungendo <span>1</span> (può utilizzare la classe all'interno dello spam non ha utilizzato per questo esempio)

.stat{ 
    position: relative; 
}

span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
}

fonte

2015-11-21 06:31:07 user2432772

Altezza della linea uguale con larghezza del bordo variabile (border box)

risposta

Problemi correlati