как отобразить всю страницу в центре браузера - PullRequest
Новая
       13

как отобразить всю страницу в центре браузера

3 голосов
/ 26 января 2010

у меня есть три элемента вне моего заполнителя контента

код мастер-страницы: 

<div id="content-outer" class="clear">
 <div id="content-wrapper">    
   <div id="content">      
     <asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
      </asp:ContentPlaceHolder>     
   </div>
 </div>
</div>

ширина внешнего содержимого div составляет 1400px, он хорошо работает на экране, ширина которого составляет 1400 или более, но когда я запускаю его на экране шириной 1024, вся страница начинается слева, я хочу выровнять по центру моя страница открыта в браузере, я дал некоторые свойства CSS, такие как

контентного внешний: Маржа налево: авто; поле справа: авто; (не работает)

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

Ответы [ 2 ]

7 голосов
/ 26 января 2010

Во-первых, использование центрального тега устарело, поэтому его не следует использовать. 

<center>
    Your content here
</center>

Ваше решение (я поставил css для ясности) 

<div style="width: 1400px; margin: 0 auto;">
    Your content here
</div>

Является ли правильный метод центрирования контента на странице.

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

Ваши варианты:

  1. Жить с этим - так работают все сайты, ориентированные по центру
  2. Уменьшите ширину вашего сайта для работы на маленьких экранах (тогда на больших экранах он будет иметь больший запас)
  3. Сделайте ваш дизайн более плавным - как в примере ниже

Надеюсь, это поможет. 

<div style="width: auto; margin: 0 10%;">
    Your content here
</div>
1 голос
/ 26 января 2010

просто playaround со следующими стилями 

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
} 



or

.divMain
{
position: absolute;
left: 10%;
width: 80%;
}
...