CSS центрирование со 100% шириной - PullRequest
Новая
       31

CSS центрирование со 100% шириной

2 голосов
/ 18 декабря 2010

Я пытаюсь центрировать все содержимое страницы, чтобы при настройке размера браузера содержимое перемещалось вместе с настройкой. Я использую код CSS: 

margin: 0px auto;
width: 670px;

Однако я хочу, чтобы цветной заголовок покрывал 100% ширины, в то время как текст внутри заголовка корректируется с остальной частью страницы. Как мне одновременно сделать эти две вещи?

Ответы [ 6 ]

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

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

http://jsfiddle.net/CaUD3/

Надеюсь, что вы начали.

Bob

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

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

<html>
<head>
</head>
<body>
<div style="height:120px; background-color:#FF0000;">
    <div style="background-color:#FFFF00; width:670px; margin:0 auto;">
        My page title
    </div>
</div>
<div style="background-color:#00FFFF; width:670px; margin:0 auto;">
    My page content
</div>
</body>
</html>
0 голосов
/ 18 декабря 2010

Вам нужно будет вложить некоторые элементы div ... 

body{
margin: 0px;
text-align: center;
}

div#container{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}

Это должно центрировать ваш контейнер div #, и вы можете поместить свой контент в этот контейнер.

РЕДАКТИРОВАТЬ: Выше будетпросто центрируйте свой контейнер страницы.Я пропустил часть заголовка.Вот это ... 

body{
margin: 0px;
text-align: center;
}

div#header-container{
height: 200px;
background-color: #999999;
}

div#header{
text-align: left;
background-color: #999999;
width: 670px;
height: 200px;
margin: 0px auto;   
}

div#content{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}


<html>
<body>
<div id="header-container">
     <div id="header">Page Title and the such...</div>
</div>
<div id="content">
Some Page Content
</div>
</body>
</html>
0 голосов
/ 18 декабря 2010

Используйте margin-left:20%; margin-right:20% Это должно центрировать ваш контент.

Если вы хотите готовое решение.взгляните на Макеты Мэтью Тейлора

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

Вложите текст в абзац внутри контейнера, в котором находится текст, и установите стиль абзаца таким, каким он должен быть, при этом установив стиль контейнера на 100% ширины.

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

Не должно быть запятой между значениями, используемыми в свойстве margin. Вместо этого он должен выглядеть следующим образом: 

margin: 0px auto;
...