Надеюсь, кто-то может мне помочь и что я делаю это правильно...
Я новичок в 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
масштаб, он сдвигает всю страницу влево, но моя проблема переустановки окна ушел....
Любая помощь или совет были бы очень желанными!
Я предполагаю, что содержимое перетекает через вашу навигацию, которая помещена слева как боковая панель? В этом случае просто добавьте margin-left: 200px
(обратите внимание: измените 200px на ширину вашей навигации) на ваш обертку div следующим образом:
#wrapper {
width: 850px;
margin: 10px auto;
padding: 10px;
background: white;
margin-left: 100px;
}
РЕДАКТИРОВАТЬ:
Мой оригинальный ответ не будет сосредоточен на обертке div. Что вы можете сделать, так это добавить еще один div внутри #wrapper
и добавить все фоновые стили и так далее. Затем вы можете центрировать обертку div с помощью margin:auto
и добавить левое заполнение, чтобы избежать переполнения вашей навигации.
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;}
auto
значение, присвоенное левому и правому полям в поле объявления margin: 10px auto
, поэтому обертка больше не будет центрироваться.