-Center mehrere div Nummer Zähler

ich bereits Lasten geschaut und versucht, verschiedene Codes und nichts hat sich für mich gearbeitet ..-Center mehrere div Nummer Zähler

Ich habe diese Website, und ich möchte diese Nummer Zähler in der Mitte zu zentrieren.

Ich habe versucht, Text-Align, Rand 0 Auto und nichts funktioniert oder ich habe es an der falschen Stelle eingegeben.

Dies ist, wie es aussieht:

dies ist der HTML:

<section class="bg-primary" id="about"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-8 col-lg-offset-2 text-center"> 
        <h2 class="section-heading">We've got what you need!</h2> 
        <hr class="light"> 
        <p class="text-faded">We are a creative staffing agency that gets your brand in front of your core audience, for a one-to-one interaction. Creating an impactful and eganging brand experience.</p> 
        <div id="shiva"><span class="count">300</span></div> 
        <div id="shiva"><span class="count">78</span></div> 
        <div id="shiva"><span class="count">32</span></div> 
       </div> 
      </div> 
     </div> 
    </section>

Und die CSS:

#shiva 

{ 

    margin: 25px; 
    float: left; 
} 



.count 
     { 

    line-height: 100px; 
    color:black; 
    font-size:50px; 
}

Quelle

2016-05-05 Tomas Alonso Rehor

Es gibt so viele Möglichkeiten, das ist nur einer von ihnen: https: //jsfiddle.net/4dekcan3/ FYI, IDs müssen im Dokument contex eindeutig sein. –

Wenn Sie die vorhandene Struktur nicht ändern und dieses Problem mit der Anzahlausrichtung beheben möchten, können Sie die folgende css-Eigenschaft verwenden: #shiva { Rand: 25px; Schwimmer: links; Textausrichtung: Mitte; Breite: 29%; } – Mohini

versuchen die folgende

<div class="c"> 
    <div id="shiva"><span class="count">300</span></div> 
    <div id="shiva"><span class="count">78</span></div> 
    <div id="shiva"><span class="count">32</span></div> 
</div> 

.c { 
    width: 350px; 
    margin:0 auto; 
}

https://fiddle.jshell.net/zmtLatn9/

Quelle

2016-05-05 10:56:06 madalinivascu

Ausgezeichnet! Ich musste eine 400px Breite verwenden, aber das hat den Job gemacht! danke –

@TomasAlonsoRehor, um eine echte Zentrierung ohne die Notwendigkeit einer hartcodierten Breite zu bekommen, würde ich 'text-align: center' auf' .c' div (andere Stile entfernen) und machen 'shiva' divs' display: inline- Block '(auch Shiva in eine Klasse wechseln) – Pete

Dies sollte es tun:

<div id="container"> 
    <div id="shiva"><span class="count">300</span></div> 
    <div id="shiva"><span class="count">78</span></div> 
    <div id="shiva"><span class="count">32</span></div> 
</div> 

#container { 
    width: 100%; 
    text-align: center; 
}

Quelle

2016-05-05 10:51:35 Steveo

Sie können versuchen, diese ......

<div class="parent"> 
    <div id="shiva"><span class="count">300</span></div> 
    <div id="shiva"><span class="count">78</span></div> 
    <div id="shiva"><span class="count">32</span></div> 
</div> 

.parent { 
    margin:auto; 
    display:table; 
}

Quelle

2016-05-05 11:54:57 Mamun

-Center mehrere div Nummer Zähler

Antwort

Verwandte Themen