Центр содержимого веб-страницы - PullRequest
Новая
       7

Центр содержимого веб-страницы

5 голосов
/ 19 мая 2009

Я хочу "центрировать" текст и содержимое моей веб-страницы. Теперь я не хочу выравнивать текст по центру, я все еще хочу выравнивание по левому краю, но я хочу иметь значительные поля слева и справа, чтобы все выглядело относительно центрированного. Можете ли вы показать мне HTML / CSS для достижения этой цели? БЛАГОДАРЯ.

Ответы [ 7 ]

11 голосов
/ 19 мая 2009 
<html>
<head>
<style type="text/css">

body {
   text-align: center; /* Center in IE */
}

#content {
   text-align: left; /* reset text-align for IE */
   margin: 0 auto; /* Center in other browsers */
   width: 800px;
}

html {
   overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}

</head>
<body>
<div id="content">

   content here

</div>
</body>
</html>

* ОБНОВЛЕНИЕ: Я добавил немного CSS, который заставляет вертикальную полосу прокрутки в FF согласно некоторым комментариям ниже.

3 голосов
/ 19 мая 2009

Создайте 3 столбца на вашей странице. Весь ваш текст помещается в центральном столбце и может быть оставлен со знаком.

Посмотрите здесь примеры http://matthewjamestaylor.com/blog/perfect-3-column.htm

2 голосов
/ 19 мая 2009 
#wrapper {
    width: 800px;
    margin: 0 auto; 
 }

<div id="wrapper">
     <p>This will appear in a centered container</p>
</div>
1 голос
/ 19 мая 2009

Я верю , это может вам помочь.

0 голосов
/ 19 мая 2009

У вас есть контейнер div, в который вы помещаете весь свой контент: 

<html>
<head>
    <title>a sample</title>
</head>
<body>
    <div id="container">
         <h1>this is it</h1>
         <p>all content goes here</p>
    </div>
</body>

Затем добавьте CSS, указав ширину и поля вашего контейнера div: 

#container {
    width: 750px;
    margin: 0 auto;
}
0 голосов
/ 19 мая 2009

попробуй 

#div {
  margin:0 auto
};
0 голосов
/ 19 мая 2009

CSS: 

#container {
    max-width: 800px;
    margin: 0 auto;
}

А в HTML оберните все в: 

<div id='container'>
...
</div>

(Обратите внимание, что этот ответ отличается от ответа мипа тем, что я использую max-width, чтобы дать текучую разметку ниже 800 пикселей, тогда как он использует width, чтобы дать фиксированную разметку.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...