CSS und Positionieren eines Span-Elements in einem Div

Question

Ich habe ein Div und ich möchte ein Span-Element in ihm ausrichten. Das span-Element sollte unten und horizontal in der Mitte des übergeordneten Elements ausgerichtet sein.

<div style="position: relative; clear: both; float: left; border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;"> 
 
     <span style="border: none; background-color: green; margin: 0; padding: 0; border: 0; position: absolute; margin-left: auto; margin-right: auto; bottom: 0;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span></div>

Zur gleichen Zeit wird die Ausrichtung meines span-Element funktioniert nicht. Die Breite des Span-Elements ändert sich ständig. Ich meine, dass es kein Element fester Breite ist.

Ich suche nach Hilfe, und eine Cross-Browser-Lösung. Kein JavaScript/jQuery erlaubt.

Answer 1

So ähnlich?

.holder { 
 
    display: table; 
 
    border: 2px solid #999999; 
 
    padding:0; 
 
    margin: 1px; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    background: #00ff00; 
 
} 
 

 
.some { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
    border: none; 
 
}

<div class="holder"> 
 
    <span class="some"> 
 
    123. 
 
    </span> 
 
</div>

Answer 2

Flexbox kann das tun:

div { 
 
    float: left; 
 
    border: 2px solid #999999; 
 
    padding: 0; 
 
    margin: 1px; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    display: inline-flex; 
 
    align-items: flex-end; 
 
    justify-content: center; 
 
}

<div> 
 
    <span>&nbsp;&nbsp;123.&nbsp;&nbsp;</span> 
 
</div>

Answer 3

verwenden CSS auf der Spannweite:

.y { 
    display: inline-block; 
    background-color: green; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom: 0px; 
} 

Die untere "Ausrichtungshöhe" kann mit dem Parameter bottom eingestellt werden.

BTW: Es gibt keine Polsterung um die Spannweite, das ist nur die Höhe der Linie und die nicht-brechenden Räume, die Sie in sich setzen.

.x { 
 
    position: relative; 
 
    clear: both; 
 
    float: left; 
 
    border: 2px solid #999999; 
 
    margin: 1px; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    background: url(/img/img60x60.gif) no-repeat; 
 
} 
 
.y { 
 
    display: inline-block; 
 
    background-color: green; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    bottom: 0px; 
 
}

<div class="x"> 
 
    <span class="y">&nbsp;&nbsp;123.&nbsp;&nbsp;</span> 
 
</div>

Answer 4

.holder {  
    display: table; 
    border: 2px solid #999999; 
padding:0; 
margin: 1px; 
width: 60px; 
height: 60px; 
border-radius: 50%; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
background: #00ff00; 
} 

.some { 
display: table-cell; 
vertical-align: bottom; 
text-align: center; 
border: none; 

}

<div class="holder"> 
<span class="some"> 
123. 
</span> 
</div> 

Answer 5

Es gibt keine Polsterung in Firefox hinzugefügt. Der Abstand auf jeder Seite des Textes wird in diesem Fall durch den Wert   im span-Tag festgelegt. Die unterschiedlichen Ergebnisse, die Sie erhalten, sind wahrscheinlich auf Unterschiede bei der Schriftwiedergabe zwischen Browsern zurückzuführen. Die Verwendung eines CSS Reset sollte dafür sorgen. Versuchen Sie folgendes:

<div style="border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;"> 
    <span style="background-color: green; display:inline-block; margin-top:45px;margin-left:16px;">123.</span></div> 

Auch Blick auf den Code, es sieht aus wie Sie einen WYSIWYG-Editor verwenden, die CSS-Regeln Inline neigt und Raum, um Text von & nbsp HTML-Entities Hinzufügen anstelle von horizontalen Polsterung und text-align :Center;. Ich würde empfehlen, diese Regeln in einer Klasse hinzuzufügen und ein externes CSS-Stylesheet für bessere Leistung zu verwenden.

Answer 6

Zunächst einmal vielen Dank für Ihre Hilfe.

Endlich modifizierte ich die Antworten von @ashok und @Hardy. Ich habe es auf diese Weise:

<div style="display: table-cell; 
 
     border: 2px solid #999999; 
 
     padding: 0; 
 
     margin: 1px; 
 
     width: 60px; 
 
     height: 60px; 
 
     text-align: center; 
 
     vertical-align: bottom; 
 
     border-radius: 50%; 
 
     -webkit-border-radius: 50%; 
 
     -moz-border-radius: 50%; 
 
     background: url(/img/img60x60.gif) no-repeat;"> 
 
     <span style="position: relative; bottom: -4px; background-color: green;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span> 
 
    </div>

Es scheint mir, dass dies OK funktioniert.Ich werde den Code ändern und meinen CSS-Code in eine externe Datei einfügen.