Gleiche Zeilenhöhe mit variierender Randbreite (Rand-Box)

In diesem vereinfachten Beispiel habe ich 4 Kreise mit jeweils unterschiedlicher Randbreite, und ich versuche die gleiche Zeilenhöhe beizubehalten, um sie horizontal ausgerichtet zu halten.Gleiche Zeilenhöhe mit variierender Randbreite (Rand-Box)

jedoch die Rahmenbreite scheint die Zeilenhöhe zu bewirken (trotz außerhalb der Box technisch zu sein?)

Gibt es trotzdem, dies zu lösen, ohne manuell jede Zeile-Höhenverstellung?

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

Beispiel: http://jsfiddle.net/vcJ3G/

Quelle

2013-08-07 Titan

schöne Frage, ich denke, wir jquery zu tun verwenden sollten, denn auch Putting als% des Wertes, wir haben immer einen Offset, wäre in der Lage, die Grenze zu umgehen und ich sehe, dass die jQuery dies tun http://jsfiddle.net/vcJ3G/1/ oder Klasse für die Zeilenhöhe – artSx

zu ändern Wenn Sie 'box-sizing: border-box' t einstellen Die Grenze ist technisch nicht mehr von der Stange. Es wird dann innerhalb der für die Box definierten Breite eingefügt. Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

Dies alles kann vermieden werden, wenn 'box-shadow' stattdessen verwendet wird: D –

Sie können die Zeilenhöhe entfernen, verwenden display:table-cell statt und fügen vertical-align:middle; auf Ihre stat Klasse.

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; 
}

Quelle

2013-08-07 14:58:01 j08691

Ich habe heute etwas gelernt, danke! – artSx

Schön danke, ich tendiere dazu, Tabellenzellen wegen IE7 zu vermeiden, aber ich kann wählen, das für dieses Projekt zu ignorieren. – Titan

CSS funktioniert alles, was Sie tun müssen, ist

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

}

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

Quelle

2013-08-07 15:18:25

Ich erwähnte nicht, dass ich auf allen Kreisen die gleiche Höhe behalten musste, daher die Verwendung der Grenzbox. Sie haben Recht ohne diese Erklärung, obwohl, also danke. – Titan

über diese einige von oben Abschnitt entfernen kam und dachte mir, wie es ist möglich, es ohne Tabellenzelle zu tun, meine Lösung wahrscheinlich nicht die beste, aber ich entscheide mich einfach um es trotzdem zu teilen. http://codepen.io/svdovichenko/pen/rObzqM?editors=110

Hinzufügen <span>1</span> (Klasse innerhalb Spam verwenden, können nicht für dieses Beispiel verwendet haben)

.stat{ 
    position: relative; 
}

und

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

Quelle

2015-11-21 06:31:07 user2432772

Gleiche Zeilenhöhe mit variierender Randbreite (Rand-Box)

Antwort

Verwandte Themen