Div центрирование вопроса

0

Надеюсь, кто-то может мне помочь и что я делаю это правильно...

Я новичок в HTML, CSS и аналогичном с чуть более года опыта, это первый веб-сайт, который я кодирую вручную - моя предыдущая попытка заключалась в использовании Wordpress.

Во всяком случае, я постараюсь сделать этот пост максимально подробным... здесь мы идем! :)

Я пытаюсь центрировать мой главный div с идентификатором обертки. Моя проблема в том, что я использую margin: 10px auto; он центрирует его совершенно независимо от моего разрешения ПК или уровня масштабирования моего браузера. Затем, когда мое окно браузера изменено, оболочка div начинает перемещаться, переходя через мою панель навигации - вот правила CSS, которые применяются как к обертке div, так и к navbar;

#wrapper {
   width: 850px;
   margin: 10px auto;
   padding: 10px;
   background: white;
}

#nav {
   padding: 5px;
   position: fixed;
   left: 35px;
   top: 250px;
}

Теперь, когда я margin: 10px 250px от margin: 10px auto и use margin: 10px 250px div почти в центре моего разрешения и масштабирования браузера, но когда я margin: 10px 250px масштаб, он сдвигает всю страницу влево, но моя проблема переустановки окна ушел....

Любая помощь или совет были бы очень желанными!

  • 3
    Пожалуйста, вставьте пример HTML-разметки или JSFiddle.
Теги:
centering

1 ответ

0

Я предполагаю, что содержимое перетекает через вашу навигацию, которая помещена слева как боковая панель? В этом случае просто добавьте margin-left: 200px (обратите внимание: измените 200px на ширину вашей навигации) на ваш обертку div следующим образом:

#wrapper {
   width: 850px;
   margin: 10px auto;
   padding: 10px;
   background: white;
   margin-left: 100px;
}

РЕДАКТИРОВАТЬ:

Мой оригинальный ответ не будет сосредоточен на обертке div. Что вы можете сделать, так это добавить еще один div внутри #wrapper и добавить все фоновые стили и так далее. Затем вы можете центрировать обертку div с помощью margin:auto и добавить левое заполнение, чтобы избежать переполнения вашей навигации.

JSfiddle

CSS

#wrapper {
    margin: 10px auto;
    padding-left: 100px;
    width: 850px;
}

#wrapper .content{    
    padding: 10px;
    background: white;
}

#nav {
    padding: 5px;
    position: fixed;
    left: 35px;
    top: 250px;
}

HTML

<div id="wrapper">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
    </div>
</div>

<div id="nav">
    navigation
</div>

Другим решением может быть добавление прокладки к телу, хотя это повлияет на всю вашу страницу (например, нижний колонтитул и заголовок и т.д.),

body{padding-left: 200px;}
  • 0
    Это перезапишет auto значение, присвоенное левому и правому полям в поле объявления margin: 10px auto , поэтому обертка больше не будет центрироваться.
  • 0
    Я просто понял, что это будет проблемой. Я скоро обновлю свой ответ.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню