Question

我有更大的父div，里面我有一组图像。每张图片都有一个名为“顶部到中心”的值。它以像素分配。下面给出了一个表示。

********** --
*        *  }  <--- 'top-to-center' value( example: 100px )
*    X   * --
*        *  
*        *   
*        *  
**********

父div是较大的一个，具有不同顶部到中心值的图像集必须沿父DIV的水平中心线对齐。例如，＆＃39; X＆＃39;上面的图像点必须与父DIV的中心水平线重叠。每个图像必须通过重叠每个图像的手动分配的中心点沿着父水平中心线对齐。请有人帮我解决这个问题。我试图实现这种各种js脚本，没有什么是成功的！

这是HTML：

    <ul id="sortable" style="display: none; margin-left: auto; margin-right:  auto;" class="ui-sortable">
        <li style="display: none; position: relative;" id="initialItem"  class="ui-sortable-handle ui-draggable ui-draggable-handle"></li>
        <li class="ui-state-default" data-id="26" id="comp-0" style="height: 56.25px; width: 84.375px; margin: 28.125px;"><a href="javascript:void(0);" class="deleteButton" style="display: none;" onclick="remover(0)">x</a>S</li><li  class="ui-state-default" data-id="26" id="comp-1" style="height: 56.25px; width:  84.375px; margin: 28.125px;"><a href="javascript:void(0);" class="deleteButton" style="display: none;" onclick="remover(1)">x</a>S</li>
        <li class="ui-state-default" data-id="26" id="comp-2" style="height: 56.25px; width: 84.375px; margin: 28.125px;"><a href="javascript:void(0);" class="deleteButton" style="display: none;" onclick="remover(2)">x</a>S</li>   
    </ul>

这是JavaScript：

//get database information of components

var findItem = function(id){
    var item;
    var obj = JSON.parse(php_vars);
    for(var i=0; obj.length > i; i++){
      if( parseFloat(obj[i].id) == id ){
        item = obj[i];
      }
    }
    return item;
    }
    //object of elements - components array has IDs of elements
      var options = {
          components: [1,2,6,4,2] //example
      }
    //loop through components
    for(var i=0; options.components.length > i; i++){
        var component = findItem(options.components[i]);
        var center_value = component.top_to_center;
        //get center of the parent div
        var board_center = parseFloat($('#board').height()/2);
        //assign margin top and align to center
        $('#comp-'+i).css('margin-top', board_center - center_value);
    }
    //...
    //further code???
};

根据手动分配的中心位置垂直居中元素

0 个答案: