Bootstrap CSS Text nicht vertikal ausrichten

-1

Ich erstelle einen horizontalen Zähler, um den Schritt zu markieren, an dem Sie gerade arbeiten. Wir verwenden Bootstrap 4. Das CSS funktioniert ohne Bootstrap, aber wenn ich es in das Projekt hinzufüge, wird es nicht vertikal ausgerichtet. Der Text ist unter dem Kreis.Bootstrap CSS Text nicht vertikal ausrichten

Die Nummer sollte sowohl vertikal als auch horizontal innerhalb des Kreises zentriert werden.

Wie kann ich dieses CSS im Bootstrap-Projekt arbeiten lassen?

HTML

.steps { 
 
    margin: auto; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    text-align: center !important; 
 
    vertical-align: middle !important; 
 
} 
 

 
.steps div{ 
 
    display: inline-block; 
 
} 
 

 
.steps .circle { 
 
    border-radius:100px; 
 
    width: 75px; 
 
    height: 75px; 
 
    text-align: center !important; 
 
    vertical-align: middle !important; 
 
    line-height: 75px; 
 
} 
 

 
.steps .separator { 
 
    width: 100px; 
 
    margin:0px -5px 0px -5px; 
 
    vertical-align: middle !important; 
 
} 
 

 
.steps .done { 
 
\t color:#35FF8B; 
 
} 
 

 
.steps .done .circle { 
 
\t border:3px solid #35FF8B; 
 
\t background:#385463; 
 
} 
 

 
.steps .done .separator { 
 
\t border:4px solid #35FF8B; 
 
}

<div class="steps"> 
 
    <div class="done"> 
 
    <div class="circle"> 
 
     1 
 
    </div> 
 
    <div class="separator"></div> 
 
    </div> 
 
</div>

Quelle

2017-07-29 9minday

Sie tun dies mit line-height auch ... die Polsterung entfernen und fügen Sie width:75px und height: 75px; und line-height:75px;

.steps { 
 
    margin: auto; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    text-align: center !important; 
 
    vertical-align: middle !important; 
 
} 
 

 
.steps div{ 
 
    display: inline-block; 
 
} 
 

 
.steps .circle { 
 
    border-radius:100px; 
 
    width: 75px; 
 
    height: 75px; 
 
    text-align: center !important; 
 
    vertical-align: middle !important; 
 
    line-height: 75px; 
 
} 
 

 
.steps .separator { 
 
    width: 100px; 
 
    margin:0px -5px 0px -5px; 
 
    vertical-align: middle !important; 
 
} 
 

 
.steps .done { 
 
    color:#35FF8B; 
 
} 
 

 
.steps .done .circle { 
 
    border:3px solid #35FF8B; 
 
    background:#385463; 
 
} 
 

 
.steps .done .separator { 
 
    border:4px solid #35FF8B; 
 
}

<div class="steps"> 
 
    <div class="done"> 
 
    <div class="circle"> 
 
     1 
 
    </div> 
 
    <div class="separator"></div> 
 
    </div> 
 
</div>

Quelle

2017-07-29 11:11:16

Dank! Das hat funktioniert: D Nur ein Detail funktioniert immer noch nicht für mich. Die Nummer ist nicht vertikal ausgerichtet. Siehe aktualisierten Bild in Post :) – 9minday

Willkommen:) ..... Stellen Sie die Zeilenhöhe .. es kann funktionieren! –

Danke! Zeilenhöhe 70px funktioniert! – 9minday

Ich bin mir nicht sicher, was das endgültige Layout aussehen soll, aber ich würde flexboxes sowohl vertikal als horizontal und zum Zentrum verwenden.

.steps { 
 
    margin: auto; 
 
    font-size: 40px; 
 
} 
 

 
.steps .circle { 
 
    border-radius: 50%; 
 
    width: 75px; 
 
    height: 75px; 
 
    background: lightblue; 
 
    border: thin solid blue; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.steps .separator { 
 
    width: 100px; 
 
} 
 

 
.steps .done { 
 
\t color:#35FF8B; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 

 
.steps .done .circle { 
 
\t border:3px solid #35FF8B; 
 
\t background:#385463; 
 
} 
 

 
.steps .done .separator { 
 
\t border:4px solid #35FF8B; 
 
}

<div class="steps"> 
 
    <div class="done"> 
 
    <div class="circle"> 
 
     1 
 
    </div> 
 
    <div class="separator"></div> 
 
    </div> 
 
</div>

Quelle

2017-07-29 11:08:16 Gerard

die Sie interessieren, für Bootstrap-Alignments

<span class="align-baseline">baseline</span> 
<span class="align-top">top</span> 
<span class="align-middle">middle</span> 
<span class="align-bottom">bottom</span> 
<span class="align-text-top">text-top</span> 
<span class="align-text-bottom">text-bottom</span>

Siehe die Dokumentation Vertical-Alignments-Demo

Quelle

2017-07-29 11:18:27

Bootstrap CSS Text nicht vertikal ausrichten

Antwort

Verwandte Themen