Как сделать так, чтобы контент сайта держался посередине? - PullRequest
Новая
       12

Как сделать так, чтобы контент сайта держался посередине?

0 голосов
/ 20 декабря 2010

В HTML, как сделать так, чтобы сайт занимал ~ 60-80% ширины экрана, и если окно больше, чем оно центрируется, в противном случае есть полоса прокрутки?Я говорю о том, как это делается для контента здесь, в StackOverflow.

Я пробовал это, но не получилось: 

<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<center>
<div style="width: 60em; align: center;">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div>
</center>
</body>

</html>

Ответы [ 4 ]

4 голосов
/ 20 декабря 2010

Вот тот, за которым я всегда следую: 

<body>
    <div class="wrapper">
        your content
    </div>
</body>

А потом в CSS, 

body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
2 голосов
/ 20 декабря 2010

Вы хотите авто поля ... 

<body>
  <div id="content">
    Your page content here...
  </div>
</body>

Ваш CSS должен иметь что-то вроде этого ... 

#content { width: 60%; margin: 0 auto 0 auto; }

Порядок полей (и отступы одинаковы) - вверху справа внизу слева. Или вы можете ярлык с. 

#content { width: 60%; margin: 0 auto; }

Это означает, что верх и низ будут иметь нулевое поле; слева и справа будет автоматическое поле.

1 голос
/ 20 декабря 2010

Вставьте ваш контент в div и установите для правого и левого поля значение «auto», например:

CSS: 

#content {
 width:        960px;
 margin-left:  auto;
 margin-right: auto;
}

HTML: 

<body>
 <div id="content">
 fjkgjkg etc.
 </div>
</body>
1 голос
/ 20 декабря 2010
...