Как я могу расположить веб-страницу в середине экрана? - PullRequest
Новая
       19

Как я могу расположить веб-страницу в середине экрана?

9 голосов
/ 25 марта 2009

Как я могу расположить веб-страницу в середине экрана? как страницы на веб-сайте stackoverflow? Я пишу главную страницу своего веб-сайта и хочу использовать HTML и CSS, чтобы расположить главную страницу в середине экрана, а затем создать внутренний блок позиционирования с помощью CSS. Но я не могу увидеть свою страницу посередине!

Спасибо!

Ответы [ 8 ]

17 голосов
/ 25 марта 2009

Вы можете использовать поля, чтобы расположить его в центре по горизонтали.

Учитывая этот HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
    <div id="page"> ... content ... </div>
  </body>
</html>

CSS может быть простым: 

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

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

6 голосов
/ 25 марта 2009

Создайте <div> в вашем <body> примерно так: 

<body>
<div id="main">

<!-- ... -->

</div>
</body>

И добавить следующий CSS: 

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

#main {
    margin-left: auto;
    margin-right: auto;
    text-align: left;   /* IE */
    width: XXX;         /* Fill this out. */
}
2 голосов
/ 25 марта 2009

Поместите весь ваш контент в контейнер и дайте ему поле: 0 auto

0 голосов
/ 22 ноября 2018

Все просто: дисплей: встроенный блок ; 

<div style="text-align: center; display: inline-block; width: specifyYourWidthHere">
    <div>
          //Your TextBox here
    </div>
</div>
0 голосов
/ 15 октября 2016

Пусть код HTML будет следующим: 

<body>
  <div class="box">.....</div>
</body>

И следующий код CSS: 

.box{
    width: 200px;
    margin: 10px auto;
}

Приведенный выше CSS-код установит ширину 200px для div и будет установлен снизу и до 10px, а поле слева направо - auto, что означает, что он автоматически отрегулирует свою позицию по центру. auto гарантирует, что левые и правые поля будут иметь одинаковый размер.

0 голосов
/ 25 марта 2009

оберните все в div с полем: auto и сделайте так, чтобы body имел text-align: center.

0 голосов
/ 25 марта 2009 
<div style="width: 800px; margin: 0px auto;">
  your content here
</div>

Проверьте эту страницу, если вы хотите горизонтальное и вертикальное выравнивание: http://www.wpdfd.com/editorial/thebox/deadcentre2.html

0 голосов
/ 25 марта 2009

Вы можете попробовать: 

<center>

Это текст для соответствия минимуму из 30 символов.

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

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

...