Как центрировать Div на всех мониторах / разрешениях / браузерах? - PullRequest
Новая
       10

Как центрировать Div на всех мониторах / разрешениях / браузерах?

0 голосов
/ 02 декабря 2009

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

Каков наилучший способ центрировать div по всем разрешениям / мониторам / браузерам?

Ответы [ 7 ]

5 голосов
/ 02 декабря 2009

По центру горизонтально, вертикально или оба? Если вы хотите и то и другое, это работало для меня в прошлом. В противном случае ответ sathish posts подходит только для горизонтального центрирования

5 голосов
/ 02 декабря 2009

Попробуйте использовать это

Сделайте родительский стиль div в качестве центра и используйте margin: 0 auto; для дочернего div 

#parentDiv{
text-align: center;
}

#main{
margin:0 auto;
width:755px;
text-align: left;
}

<div id="parentDiv"><div id="main">Content</div></div>

2 голосов
/ 02 декабря 2009

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /<em>must be half of the height</em>/ 0 0 -200px; /<em>must be half of the width</em>/}

, который будет центрировать div по горизонтали и вертикали. По отношению к первому родителю с позицией: относительный;

0 голосов
/ 29 декабря 2016

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

Допустим, у вас есть код ниже, и вы хотите центрировать содержимое внутри div 'storyline-container'. 

<body>
    <div class="storyline-container">
        <script src=storyline.js type="text/javascript"></script>
    </div>
</body>

Простое написание приведенного ниже кода не сработает, потому что вам также необходимо выровнять родительский div по центру, который в данном случае является «body» 

.storyline-container 
{
    text-align: center;
}

Добавьте приведенный ниже код в ваш CSS-файл, чтобы решить вашу проблему. 

body{
    text-align: center;
}
0 голосов
/ 02 декабря 2009

Установите ширину в div, а затем присвойте ему класс центрирования: 

.center
{
margin:0 auto;
}

Это будет по центру в любом браузере.

0 голосов
/ 02 декабря 2009

хорошо, если вы установите все для центрирования, используя 

*{margin:0 auto;}

в вашем документе будет что-нибудь центрировано, если не указано иное

или вы можете использовать упаковщик div 

div#wrapper {margin:0 auto;}

если вы используете более старый браузер, вы должны использовать 

div#wrapper {text-align:center;}

Есть около 30 способов сделать это, в зависимости от того, что вы делаете ...

это самые простые

0 голосов
/ 02 декабря 2009

если вы знаете ширину: 

<div></div>

div {
  left: 50%;
  margin-left: -50px; /* width / 2 */
  width: 100px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...