Antworten auf deine Fragen:
Neues Thema erstellen

Text in uppercase vertikal zentrieren

ChilliHilli

Noch nicht viel geschrieben

Ich bin gerade etwas am verzweifeln. Ich habe habe eine div-Element das 10px hoch ist und darin soll ein Text sein der 8px hoch ist und in uppercase
Nur bekomme ich das nicht zentriert. Wenn ich das über ein Padding mache stimmt das je nach Browser nicht mehr.
Ich habe es aauch über line-height versucht bin doch das funktioniert auch nicht so zuverlässig. Gibt es eine Möglichkeit das man "uppercase" zentrieren kann?

Hier mal mein Aufbau.
HTML:
        <ul class="detailViewTAGsListContainer">
                <li class="detailViewTagItem"
                     ng-repeat="tag in currentSelectedLook.tags | orderBy: 'name' track by tag.id">
                    <span class="detailViewTagTxt">{{::tag.name | uppercase}}</span>
                 </li>
       </ul>

Code:
.detailViewTagItem {
    display: flex;
    align-items: center;
    height: 10px;
    border-radius: 3px;
    background-color: #3e9dc0;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 2px;
    cursor: pointer;
 }

.detailViewTagTxt{
    font-family: 'LatoWeb';
    color: #2b2a2a;
    vertical-align: middle;
    font-size: 8px;
}
 

owieortho

Aktives Mitglied

Außer, dass ich in Deinem CSS noch "text-transform: uppercase;" bei der class .detailViewTagTxt eingefügt habe, hat Dein Markup bei jsfiddle den Text bei verschiedenen Div-Höhen und Textgrößen immer schön vertikal mittig positioniert.
O.
 

Myhar

Hat es drauf

Wieso werden hier überhaupt fixe Pixelwerte für Schriftgröße, Höhe, etc. verwendet?
Höhe, (und fixe Schriftgröße am Besten auch gleich) entfernen, dann folgenden Zusatz:
.detailViewTagItem { padding: 10px 0}
Abändern, je nachdem wie viel Abstand oben und unten sein soll.

Und nochmal: 8px als Schriftgröße kann doch nicht dein ernst sein? Das kann kein Mensch mehr sinnvoll lesen. Da würde ich mir lieber Gedanken um Usability machen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben