Как центрировать DIV с помощью CSS?

Я хочу знать, как центрировать div с помощью CSS. Я googled некоторые вещи & проверено на stackoverflow, но это противоречило моему CSS-коду.Как центрировать DIV с помощью CSS?

Вот мой код (на всякий случай):

body, p, span, div { 
 
    font-family: 'Droid Sans', arial, serif; 
 
    font-size:12px; 
 
    line-height:18px; 
 
    color:#6d6d6d; } 
 
.countdown { 
 
    padding-top:15px; width: 100%; 
 
    height: 68px; 
 
    margin:0 auto 0 auto; 
 
    bottom:0; 
 
    position:absolute; 
 
} 
 
.countdown .countdown_section{ 
 
    background:url('images/backcountdown.png') no-repeat 1px top; 
 
    float:left; 
 
    height:100%; 
 
    width:54px; 
 
    margin:0 5px; 
 
    text-align:center; 
 
    line-height:6px; 
 
} 
 
.countdown .countdown_amount { 
 
    font-size:15px; 
 
    color:#ab7100; 
 
    text-shadow:0 0.8px #fedd98; 
 
    line-height:52px; 
 
    font-weight:bold; 
 
    text-align: left; 
 
} 
 
.countdown span { 
 
    font-size:8px; 
 
    color:#999999; 
 
    text-transform:uppercase; 
 
    line-height:26px; 
 
}

<body> 
 
<div class="countdown clearfix"> \t \t \t \t \t \t \t 
 
</div> 
 
</body>

источник

2011-12-22 Netizen110

Что вы нашли? Конфликт как? Ваш CSS тоже больно читать. – BoltClock

вы можете предоставить нам HTML-код, есть некоторые довольно распространенные способы сосредоточиться на div, но в чем мы его сосредоточим? поддерживаете ли вы версии IE до 9? – PseudoNinja

В следующий раз я буду писать все коды вертикально, а не горизонтально: P. – Netizen110

Вы можете отцентрировать DIV с определенной шириной, используя следующий CSS:

#yourDiv { 
    width: 400px; 
    margin: 0 auto; 
}

источник

2011-12-22 20:39:08 Yogu

Следующая автоматически центрирует элемент по горизонтали:

margin: 0 auto;

источник

2011-12-22 20:38:46

То, что я хочу сосредоточить, - это .countdown, у которого уже есть margin: 0 auto 0 auto. И если я сохранил это, чтобы иметь липкий нижний колонтитул. Есть ли другие пути? – Netizen110

Вы указали 'ширина: 100%' для '.countdown', поэтому div будет использовать всю ширину, как тогда она будет центрироваться? Или вы хотите сосредоточить текст внутри? – Yogu

Ширина должна быть меньше ширины родительского контейнера. Если он установлен на 100%, то он не может быть центрирован. –

центрировать использования Div:

#content{ 
    margin: 0 auto; 
} 

<div id="content">This will be centered horizontally</div>

источник

2011-12-22 20:38:48 Gabe

<div style="margin:auto; width: 100px;">lorem</div>

источник

2011-12-22 20:39:27 sunkencity

Приведенные выше ответы будут работать на дивы с относительным или статическим позиционированием. Для абсолютно позиционируемых элементов (например, ваш .countdown элемент, вам необходимо установить left: 50% и margin-left: -XXXpx где XXX представляет половину ширины DIV (включая дополнения и границы)

(пример:. http://jsfiddle.net/7dhwG/)

источник

2011-12-22 20:42:06 Aaron

Пробовал, но получил горизонтальную полосу прокрутки. Еще np, Спасибо большое! – Netizen110

Вам нужно указать явную ширину в пикселях для ' .countdown' чего-то менее 100% от его родительской ширины. – Aaron

Большое спасибо! Ты рок! Ты сделал мой день: D. – Netizen110

Это будет центр Ваша страница он прекрасно работает.

#yourdiv { 
    width: width you want px; 
    margin: 0 auto; 
    }

источник

2011-12-22 20:50:51

Вы также можете центрировать абсолютное положение дел, если настройка осталось до 50%, а рентабельность, слева в сумме половины полной ширины в пикс.

div { 
position: absolute; 
width: 500px; 
left: 50%; 
margin-left: -251px; 
}

источник

2012-08-09 05:06:48

При условии фиксированной ширина установлена, и вы положили правильный DOCTYPE,

ли это:

Margin-left: auto; 
Margin-right: auto;

Надеется, что это помогает

источник

2012-09-29 20:34:27

Прекратите использование маржинальное: 0 авто, кросс-браузер способа это Here Я протестировал его, и он отлично работает на всех браузерах

источник

2017-04-20 02:42:41

Как центрировать DIV с помощью CSS?

ответ

Смежные вопросы