Есть такой html код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link media="all" rel="stylesheet" href="../common.css">
</head>
<body class="task2">
<ul id="list-holder">
<li><img src="images/image01.jpg" alt="image" width="132" height="92"/></li>
<li><img src="images/image05.jpg" alt="image" width="83" height="60"/></li>
<li><img src="images/image09.jpg" alt="image" width="90" height="83"/></li>
</ul>
</body>
</html>
Алгоритм такой: выбрать все <li> внутри <ul id="list-holder">. В каждой найти <img>, который нужно измерить и спозиционировать по центру используя свойства marginTop и marginLeft.
Мое решение:
window.onload = function(){
elements = document.getElementById('list-holder').childNodes;
for(var j = 0; j < elements.length; j++){
img = elements.getElementsByTagName('img')[j];
}
for(var i = 0; i < elements.length; i++){
img[i].style.marginLeft = ((elements[i].width - img[i].width)/2) + 'px';
img[i].style.marginTop = ((elements[i].height - img[i].height)/2) + 'px';
}
};
Не срабатывает. Похоже, я неправильно ищу дочерние елементы или неправильно перебираю массив. Помогите
