Text unterhalb der absoluten Spanne zentrieren

-1

Im folgenden Code habe ich ein div, das eine Zahl und ihre Einheiten enthält (im Beispiel 1000 Meilen). Die Nummer ist in der div zentriert OK, aber ich brauche die Einheiten, um richtig zentriert zu sein unter die Nummer. Wie ist das möglich?Text unterhalb der absoluten Spanne zentrieren

div.div1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    position: relative; 
 
} 
 

 
span.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
span.units { 
 
    margin: 0 auto; 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <br/> 
 
    <span class="units">miles</span> 
 
</div>

Quelle

2017-10-29 ps0604

Gibt es eine spezielle Anforderung für das Hinzufügen von 'position: absolute;' zu 'span.number'? –

Nein, ich benutze es nur, um die Spanne vertikal und horizontal zu zentrieren. Wenn Sie das ohne absolute Einstellung tun können, funktioniert das auch. – ps0604

Da gehen Sie: https://jsfiddle.net/vqgj2h7h/5/ – UncaughtTypeError

einfach den Text in die erste Spanne einfügen wie so:

<div class="div1"> 
    <span class="number"> 
     1,000 
     <span class="units">miles</span> 
    </span> 
</div>

Und diese CSS hinzufügen:

.units{ 
    display:block; 
    text-align: center; 
    font-size: 14px; 
}

Quelle

2017-10-29 18:36:34 shemaya

Verwenden Flexbox

.div1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 

 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; /* Vertical center */ 
 
    align-items: center; /* Horizontal center */ 
 
} 
 

 
.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <span class="units">miles</span> 
 
</div>

Quelle

2017-10-29 18:33:28 Shreevardhan

Up für nicht hart codieren nichts. – Miraj50

Eine Möglichkeit, es zu tun wäre Flexbox verwenden wie so:

.div1{ 
    display:flex; 
    flex-flow:column; 
}

Quelle

2017-10-29 18:35:13 nishkaush

Es gibt ein bisschen mehr, das benötigt würde. –

Ändern Sie den Wert von top in span.units.

div.div1 { 
 
    height:200px; 
 
    width:200px; 
 
    background-color:orange; 
 
    position: relative; 
 
} 
 
span.number { 
 
font-family: Verdana; 
 
font-size: 36px; 
 
font-weight: bold; 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
transform: translateX(-50%) translateY(-50%); 
 
} 
 
span.units { 
 
font-family: Verdana; 
 
font-size: 36px; 
 
font-weight: bold; 
 
position: absolute; 
 
top: 70%; 
 
left: 50%; 
 
transform: translateX(-50%) translateY(-50%); 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span><br> 
 
     <span class="units">miles</span> 
 
    <br> 
 

 
</div>

Quelle

2017-10-29 18:37:27

Ich glaube nicht, dass "Meilen" auf die gleiche Weise wie "1000" formatiert sein sollte und Ihr Code nicht richtig vertikal ausgerichtet ist. –

Wrap beide (Anzahl Einheiten +) mit einem anderen div und anzuwenden, die Position zu dieser absoluten div.

.div1 { 
 
     height:200px; 
 
     width:200px; 
 
     background-color:orange; 
 
     position: relative; 
 
    } 
 
    .center { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     transform: translateX(-50%) translateY(-50%); 
 
     text-align: center; 
 
    } 
 
    .number { 
 
     font-family: Verdana; 
 
     font-size: 36px; 
 
     font-weight: bold; 
 
    }

<div class="div1"> 
 
     <div class="center"> 
 
     <span class="number">1,000</span> 
 
     <br/> 
 
     <span class="units">miles</span> 
 
     </div> 
 
    </div>

Quelle

2017-10-29 18:37:43

Der beste Weg, dies zu tun, wird mit Flexbox, aber wenn Sie dies nicht tun möchten, können Sie text-align: center, width: 100% und top: 62% für .units Element hinzufügen.

div.div1 { 
 
    height:200px; 
 
    width:200px; 
 
    background-color:orange; 
 
    position: relative; 
 
} 
 

 
span.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
span.units { 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    top: 62%; 
 
    left: 0; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <br/> 
 
    <span class="units">miles</span> 
 
</div>

stelle ich einen Wert von top-62% aufgrund Experimente. Sie können einen anderen Wert verwenden, wenn Sie meinen, dass der Abstand zwischen Wert und Einheit zu klein oder zu hoch ist.

Edit:

Mit Flexbox (wie gesagt, es ist besser, weil Sie wie die 62% hartcodierte Werte nicht verwenden):

div.div1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
span.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <span class="units">miles</span> 
 
</div>

Ich entfernte auch <br> Etikett. Es ist unnötig. Verwenden Sie <br> nur innerhalb <p> Tags.

Quelle

2017-10-29 18:38:48

Wo sind Sie auf '62%' gekommen? –

Ich kam mit diesem Wert durch Experimente (ich redigierte Antwort). –

Das Problem mit 62% besteht darin, dass Sie darauf basieren, was Ihnen gut erschien, aber Sie müssen nicht vergessen, dass nicht jeder die Seite im selben Ansichtsfenster wie Sie sehen wird. –

CSS Flexbox zur Rettung!(Und können wir auch loswerden eine ganze Reihe von nicht benötigten CSS erhalten)

div.div1 { 
 
    height:200px; 
 
    width:200px; 
 
    background-color:orange; 
 
    display:flex;   /* Make the container a flex-container */ 
 
    justify-content:center; /* Horizontally align children */ 
 
    align-items:center;  /* Vertically align children */ 
 
    flex-direction:column; /* Change from row to column based layout */ 
 
} 
 

 
div.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
}

<div class="div1"> 
 
    <div class="number">1,000</div> 
 
    <div class="units">miles</div> 
 
</div>

Quelle

2017-10-29 18:42:50

Der Code Snippet eingebettet unten zeigt folgendes:

Standard-Augmented-Lösung
Alternative absolute Positionierungslösung
Flex-Box-Lösung

div.div1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    position: relative; 
 
} 
 

 
span.number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
span.units { 
 
    margin: 0 auto; 
 
    font-family: Verdana; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    bottom: 25%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 

 

 
/* Additional */ 
 

 
.container { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    position: relative; 
 
} 
 

 
.container_number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
} 
 

 
.container_units { 
 
    margin: 0 auto; 
 
} 
 

 
.container_inner { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    height: 30%; 
 
} 
 

 
.flex_container { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
} 
 

 
.flex_container_number { 
 
    font-family: Verdana; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
} 
 

 
.flex_container_units { 
 
    margin: 0 auto; 
 
}

<!-- Standard Augmented Solution --> 
 
<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <br/> 
 
    <span class="units">miles</span> 
 
</div> 
 

 
<hr> 
 
<!-- Alternative Absolute Positioning Solution --> 
 
<div class="container"> 
 
    <div class="container_inner"> 
 
    <span class="container_number">1,000</span> 
 
    <br/> 
 
    <span class="container_units">miles</span> 
 
    </div> 
 
</div> 
 

 
<hr> 
 
<!-- Flex-Box Solution --> 
 
<div class="flex_container"> 
 
    <span class="flex_container_number">1,000</span> 
 
    <span class="flex_container_units">miles</span> 
 
</div>

JSFiddle Demo:https://jsfiddle.net/vqgj2h7h/5/

Quelle

2017-10-29 18:55:42 UncaughtTypeError

Versuchen Sie dieses, Flexbox derzeit nicht einige Browser nicht unterstützt.

div.div1 { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: orange; 
 
    position: relative; 
 
    text-align:center; 
 
} 
 

 
span.number { 
 
    font-family: Verdana; 
 
    padding-top: 33%; 
 
    display: block; 
 
    font-weight: 600; 
 
    font-size: 36px; 
 
} 
 

 
span.units { 
 
    margin: 0 auto; 
 
}

<div class="div1"> 
 
    <span class="number">1,000</span> 
 
    <span class="units">miles</span> 
 
</div>

Quelle

2017-10-30 07:53:54 sandip7400

Text unterhalb der absoluten Spanne zentrieren

Antwort

Verwandte Themen