中心倍数div数计数器
Center multiple div number counter
我已经看了很多东西并尝试了几种不同的代码,但对我来说没有任何效果..
我有这个网站,我想把这个数字计数器放在中间。
我试过了,text-align,margin 0 auto 但没有任何效果,或者我输入错误的地方。
这是它的样子:
这是 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>
和 CSS:
#shiva
{
margin: 25px;
float: left;
}
.count
{
line-height: 100px;
color:black;
font-size:50px;
}
应该这样做:
<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;
}
试试下面的方法
<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;
}
你可以试试这个……
<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;
}
我已经看了很多东西并尝试了几种不同的代码,但对我来说没有任何效果..
我有这个网站,我想把这个数字计数器放在中间。
我试过了,text-align,margin 0 auto 但没有任何效果,或者我输入错误的地方。
这是它的样子:
这是 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>
和 CSS:
#shiva
{
margin: 25px;
float: left;
}
.count
{
line-height: 100px;
color:black;
font-size:50px;
}
应该这样做:
<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;
}
试试下面的方法
<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;
}
你可以试试这个……
<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;
}