2012-01-16 2 views
1

Может ли кто-нибудь сказать мне, что мне нужно сделать, чтобы получить следующую страницу, чтобы центрировать содержимое правильно?Проблемы с центрированием контента

Я пытался работать с чем-то еще, я использовал ранее в тот же день здесь:

#divWrapper {margin:0 auto; text-align:center;} 
#div {text-align:left;} 

Но это не работает для меня. Одна из страниц мне нужно помочь здесь: ОТРЕДАКТИРОВАНО

Спасибо за любую помощь, я просто пытаюсь получить это фиксированное, прежде чем я голову в постели: \

+0

Вам нужно добавить ширину в '# divWrapper'. Без ширины: 0 auto; не будет работать. – Virendra

ответ

3
#main-inner { 
    position: relative; 
    width: 960px; 
    border-top: 3px solid #DADADA; 
    margin: 20px auto 0; 
    overflow:auto; 
    zoom:1; 
} 

попробуйте этот. замените существующее на это. он должен сосредоточить контент.

+0

PERFECT! СПАСИБО И ДОБРОЙ НОЧИ! ;) –

+2

Что нужно отметить при центрировании: 1.) если вы центрируете контейнер, используя метод margin: x auto x, контейнер должен иметь не процентную ширину 2.) Родительская ширина не нужна, но она должна быть больше чтобы полюбоваться степенью центрирования 3.) контейнер должен быть элементом уровня блока 4.) никаких поплавков не требуется. 'zoom' и' overflow' были добавлены только для корректировки базовой линии вашего контейнера, поскольку она содержит плавающие элементы. – Joseph

+0

Хорошо, спасибо за советы. Я только сейчас начинаю активно использовать css, поэтому время от времени я спотыкаюсь;) –

2

Она нуждается в ширину! для правильной работы.

+0

.newcontent имеет ширину 100% –

+0

, чтобы использовать ширину 100%, вам нужно применить маржу по кругу, ее невозможно вычислить без истинной ширины. маржа в 10% будет применяться с отметкой в ​​100 пикселей вокруг – Philip

+0

Филипп, спасибо за ответы, можете ли вы рассказать мне, как мне нужно манипулировать реальным кодом, который я использую? Я использую инструменты Chromes Developer, чтобы попробовать разные вещи, и ничто не помогает. –

1

Дайте вашему #divWrapper ширину. По умолчанию ширина будет расширяться вплоть до содержащего элемента, поэтому для создания внешнего окружения его ширина должна быть меньше, чем ее содержащий элемент.

0

Попробуйте #divWrapper {margin:0 auto; text-align:center;width:960px}

#div {text-align:left;width:500px} 

Edit: enter image description here Есть опечатки в вашем CSS. Проверьте этот обновленный CSS для margin-inner & margin-internal-right. Это будет исправить вашей проблему

#main-inner { 
     float:left; 
     position:relative; 
     width:100%; 
     border-top:3px solid #dadada; 
     margin-top:20px; 
     margin-right:auto; 
     margin-left:auto; 
} 


#main-inner-right { 

     position:relative; 
     width:640px; 
     text-align:left; 
     margin-top:20px; 
     margin-right:auto; 
     margin-left:auto; 
} 
+0

Я не использую divWrapper и #div на своей странице, я пытаюсь настроить то, что уже есть. Возможно ли, чтобы вы посмотрели живой код и сказали мне, что мне нужно изменить? Спасибо за ответ. –

+0

@Scott - эта страница использует фиксированную ширину 960 пикселей для оберток содержимого. Иллюзия изменчивой ширины задается повторением фоновых изображений в элементах обложки верхнего уровня, которые имеют ширину 100% и автомаршрут. –

+0

Отметьте обновленный ответ. Пожалуйста, отметьте как ответ, если это поможет вам. Damien –

1

Вы можете только центрировать элементы с margin:0 auto, когда вы предоставляете фиксированную ширину, из которых поля могут позиционировать себя от автоматически. Поэтому добавьте исправление с вашей оберткой, и оно должно работать.

1

Возможно, вам также потребуется указать text-align: center; если вы хотите, чтобы фактическое содержимое div было сосредоточено.

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