2017-10-29 6 views
-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>

+0

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

+0

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

+0

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

Antwort

1

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

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>

+0

Up für nicht hart codieren nichts. – Miraj50

0

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

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

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

0

Ä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>

+0

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

0

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>

0

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.

+0

Wo sind Sie auf '62%' gekommen? –

+0

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

+1

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. –

0

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>

0

Der Code Snippet eingebettet unten zeigt folgendes:

  1. Standard-Augmented-Lösung
  2. Alternative absolute Positionierungslösung
  3. 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/

0

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>