2016-05-05 5 views
0

я уже смотрел нагрузки и попытался несколько различных кодов и ничего не работает для меня ..центр множественных ДИВ номер счетчик

У меня есть этот сайт, и я хочу, чтобы центрировать это число счетчиков в середине.

Я пробовал, выравнивание текста, margin 0 auto и ничего не работает, или я печатал его не в том месте.

Вот как это выглядит:

enter image description here

это 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; 
} 
+1

Существует так много способов, это только один из них: https: //jsfiddle.net/4dekcan3/ FYI, идентификаторы должны быть уникальными в документе contex –

+0

Если вы не хотите изменять существующую структуру и исправить эту проблему выравнивания счетчика, вы можете использовать следующее свойство css #shiva { margin: 25px; float: слева; text-align: center; ширина: 29%; } – Mohini

ответ

3

попробуйте следующее

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

+1

Отлично! Я должен был использовать ширину 400 пикселей, но это сделало работу! спасибо –

+0

@TomasAlonsoRehor, чтобы получить истинное центрирование без необходимости в жесткой кодировке, я бы поставил 'text-align: center' на' .c' div (удаление других стилей) и вывести 'shiva' divs' display: inline- block' (также изменяя shiva для класса) – Pete

3

Это следует сделать это:

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

Вы можете попробовать это ......

<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; 
} 
Смежные вопросы