Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Позиционирование элемента по центру (https://javascript.ru/forum/dom-window/61599-pozicionirovanie-ehlementa-po-centru.html)

Craftist 25.02.2016 16:19
Позиционирование элемента по центру
 
Всем привет. Знаком в js лишь поверхностно. Пытался позиционировать элемент div (id="links") по центру:
var dv = document.getElementById('links');
    dv.style.left = ( screen.width / 2 ) - ( dv.offsetWidth / 2 );
    dv.style.top = ( screen.height / 2 ) - ( dv.offsetHeight / 2 );

Как можно сделать так, чтобы элемент div был по центру экрана не только по горизонтали (align="center"), но и по вертикали?

destus 25.02.2016 16:45
Craftist,
а через CSS нельзя?

рони 25.02.2016 16:50
Craftist,
Все способы вертикального выравнивания в CSS

Feex 26.02.2016 02:24
Craftist,
с помощью css примерно так:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.center {
background: #fff;
width: 20px;
height: 24px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -10px;
}
</style>
</head>
<body>
<div class="center">
<img src="http://javascript.ru/forum/images/smilies/yes4.gif" alt=""/>
</div>
</body>
</html>

width: 20px;
height: 24px;
это размер элемента, в данном случае размер смайла 20х24
margin-top: -12px; - тут задаем половину от значения "height"
margin-left: -10px; - тут задаем половину от значения "width"
вроде и всё.

Craftist 26.02.2016 13:15
То есть, если размеры 75% и 60%, нужно указывать маргины -37% и -30%?

Feex 26.02.2016 22:22
Цитата:
Сообщение от Craftist (Сообщение 409353)
То есть, если размеры 75% и 60%, нужно указывать маргины -37% и -30%?
Если в %, то так просто не получится, но и сложного ничего тоже нет: придется поиграться с margin-top :)
Но в данном варианте решения вопроса, именно с %-ми, идеально не получится все-равно(разное разрешение экранов будет влиять).. Для % лучше другой вариант поискать.


Часовой пояс GMT +3, время: 00:05.