Как центрировать элемент посреди окна браузера?
Если вы исправляете что-то в одном и том же модуле, вы можете использовать __main__:
from mock import patch
from collections import defaultdict
with patch('__main__.defaultdict'):
d = defaultdict()
print 'd:', d
Если вы что-то делаете для импортированного модуля, вы можете использовать это Имя модуля, поэтому исправлена правильная ссылка (или имя):
# foo.py
from collections import defaultdict
def bar():
return defaultdict()
# foo_test.py
from mock import patch
from foo import bar
with patch('foo.defaultdict'):
print bar()
Дело в том, что патч хочет получить полный путь к патчу. Это просто выглядит немного странно при исправлении чего-либо в текущем модуле, так как люди не часто используют __main__ (или, если уж на то пошло, ссылаются на текущий модуль).
10 ответов
Я удивился, что никто не сказал о position = fixed. Он делает именно то, что я просил, и работает во всех "человеческих" браузерах и IE начиная с 7.
Для этого вам необходимо знать размер центрируемого элемента. Подойдет любое измерение (например, px, em, процент), но оно должно иметь фиксированный размер.
CSS будет выглядеть следующим образом:
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Edit : он центрируется в области просмотра. Вы можете центрировать в окне браузера только с помощью JavaScript. Но в любом случае этого может быть достаточно, поскольку вы, вероятно, захотите отобразить всплывающее / модальное окно?
Это проверено и работает во всех браузерах.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;}
#inner {margin-left: auto; margin-right: auto;}
#inner {width: 300px; } /* this width should be the width of the box you want centered */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
centered
</div>
</div>
</div>
</body>
</html>
Вы можете написать JavaScript w, чтобы найти высоту и ширину окна и уменьшить их до половины, чтобы найти центральную точку.
Добавьте что-нибудь внутри тега и установите верхнюю и левую часть div из javascript в центральные координаты, которые вы нашли с помощью Javascript.
] Дайте мне знать, если вам понадобится код.
<div align="center">
или
<div style="margin: 0 auto;">
Я не думаю, что вы можете это сделать. Вы можете находиться в середине документа, однако вы не знаете макет панели инструментов или размер элементов управления браузера. Таким образом, вы можете центрировать документ, но не в середине окна браузера.
Это вполне возможно с помощью всего лишь CSS - JavaScript не требуется: Вот пример.
Вот исходный код этого примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
Если я правильно понимаю, вы хотите центрировать элемент по вертикали и горизонтали в зависимости от окна, а не документа. Это может быть немного неудобно, но вы можете использовать javascript для определения размера окна, положения прокрутки, размера элемента и т. Д., А затем разместить элемент в центре окна (не документ, а видимое окно).
Если вы хотите, чтобы этот элемент оставался в модуле окна при прокрутке, вам нужно будет зафиксировать событие прокрутки и настроить положение.
Код для этого отличается от одного браузера к другому.
Чтобы выровнять div по центру, вы должны применить стиль
div
{
margin: 0 auto;
}
Надеюсь, это поможет. Уловка состоит в том, чтобы использовать абсолютное позиционирование и настроить верхний и левый столбцы. Конечно, «мертвая точка» будет зависеть от размера встраиваемого объекта / div, поэтому вам нужно будет поработать. Для окна входа в систему я использовал следующее - оно также имеет некоторую безопасность с max-width и max-height, которые могут быть вам полезны в вашем примере. Настройте значения ниже в соответствии с вашими требованиями.
div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top: 20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}