почему не срабатывает margin?

338

08 июня 2017, 06:50

Только начинаю изучать работу с сайтами, столкнулся с проблемой отцентровки самого сайта по центру смотрю разные видео , на видео всё работает а у меня нет.

body{
    background: url(img/BG.jpg) no-repeat 100%;  
    font-family: Arial, Tahoma, Sans-serif;  
    padding: 40px 0;  
}
.wrapper{  
    width: 960px;  
    margin: 0 auto;
}

Текст не выравнивается, а всё так же ориентирован по левому верхнему краю - почему?

Может кто-то подсказать, как сразу выставлять ширину и центровку сайта по центру в %

Жду с нетерпением помощи, и с радостью у кого то поучился бы!

Answer 1

Добавить указатель center, попробуйте таким образом:

body{
    text-align:center;
    background: url(img/BG.jpg) no-repeat 100% center;  
    font-family: Arial, Tahoma, Sans-serif;  
    padding: 40px 0;  
}

Answer 2

Блок по центру, например:

.wrapper{  
  width: 960px;  
  margin-left: -480px;
  left: 50%;
  position: absolute;      
}

Answer 3

Более развернутый вариант про text-align от Dmitry Kulevich

Ваш .wrapper, уверен на 99.9% является div элементом. Div - это блочный элемент, у блочного элемента есть свойство растягиваться на всю ширину родителя, в вашем случае, это скорее всего body, так как html и body по-умолчанию растягиваются на всю ширину экрана монитора, то и ваш wrapper тоже растянут на всю ширину. Это можно легко проверить, задайте вашему .wrapper границу border: 1px solid #000 и вы увидите как он растянут...Идем дальше, текст в блочных элементах по-умолчанию отцентрирован слева, что вы и наблюдаете. Если вы хотите, чтобы текст был по-середине блочного элемента надо "сказать" это ему text-align: center