Javascript 如何集中所有列表'；s元素到父div_Javascript_Jquery_Css

Javascript 如何集中所有列表'；s元素到父div

javascript jquery css

Javascript 如何集中所有列表'；s元素到父div,javascript,jquery,css,Javascript,Jquery,Css,我将动态地向ul块添加元素。我想将所有列表元素放在父div（brownboder）的中心。例如如果浏览器的分辨率允许您在一行中设置两个块，我希望将这一行相对于父div居中我会非常贪污 myCode: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="

我将动态地向ul块添加元素。我想将所有列表元素放在父div（brownboder）的中心。例如如果浏览器的分辨率允许您在一行中设置两个块，我希望将这一行相对于父div居中

我会非常贪污

myCode:

<!doctype html>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>

   var tab = [2,3,4,5,7,8,9,11,12,13,14,15];

    $(document).ready(function(){



    $('#godziny').on('click', '.godzina', function(){
        //alert(this.attr('class'));
        $('.yb').removeClass('yb');
        $(this).addClass('yb');
    });

    $('#getElements').click(function() {
         for(i = 0; i < tab.length; ++i) {
        alert(tab[i]);
        setTimeout(function(i){
           $('#godziny').append('<li class="godzina">' + tab[i] + '</li>');             
        }, i*50);
         }

        });
   });
</script>
<style>
#spisSalonow {
    margin: 0 auto;
}   

#spisSalonow > div {
   padding-top: 15px;
   color:red;
}

#wybor_terminu  {
    border: 1px solid brown;
}

#wybor_terminu ul {
    list-style-type: none;
    overflow: hidden;
    border: 1px solid red;
}

#wybor_terminu ul li {
    width: 200px;
    height: 200px;
    text-align: center;
    color: blue;
    border: 0.2em solid green;
    float: left;
    cursor: pointer;
    margin-right: 40px;
    margin-top: 40px;
    /*margin:auto;*/
    /*
       opacity: 0.4;
       filter: alpha(opacity=40);
   */
}

.yb {
   background: yellow;
}

</style>

</head>

<body>

<div id="wrapper">
    <input type="button" value="get Elements" id="getElements"/>
        <section id="content">
            <div class="full">
                <BR/>
                <div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
                    <div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" />  <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
                    <ul id="godziny" style="margin-top: 25px;">

                    </ul>
                </div>
        </section>
</div> 

</body>

</html>


var表=[2,3,4,5,7,8,9,11,12,13,14,15]；
$（文档）.ready（函数（）{
$（'#godziny'）。在（'click'，'.godzina'，函数（）上{
//警报（this.attr（'class'））；
$（'.yb'）.removeClass（'yb'）；
$（this.addClass（'yb'）；
});
$（'#getElements'）。单击（函数（）{
对于（i=0；i”+tab[i]+””）；
}，i*50）；
}
});
});
#斯皮萨洛诺{
保证金：0自动；
}   
#斯皮萨洛诺>分区{
填充顶部：15px；
颜色：红色；
}
#维博尔终端{
边框：1px纯棕色；
}
#维博尔终端{
列表样式类型：无；
溢出：隐藏；
边框：1px纯红；
}
#维博尔·特米努·乌利{
宽度：200px；
高度：200px；
文本对齐：居中；
颜色：蓝色；
边框：0.2米纯绿色；
浮动：左；
光标：指针；
右边距：40px；
边缘顶端：40px；
/*保证金：自动*/
/*
不透明度：0.4；
过滤器：α（不透明度=40）；
*/
}
.yb{
背景：黄色；
}


任何一天

添加以下行：

CSS

#wybor_terminu ul {
  list-style-type: none;
  overflow: hidden;
  /*NEW*/
  padding: 0;
  width: 100%;
}

#wybor_terminu ul li {
  width: 200px;
  height: 200px;
  text-align: center;
  color: blue;
  border: 0.2em solid green;
  /*float: left; You don't need this line*/
  cursor: pointer;
  /*NEW*/
  margin:auto;
  margin-top: 40px;

}

编辑

这只是一个快速的解决方案，使用引导功能可能会对您有所帮助
jQuery
在这一行中，我添加了引导类：

$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');

如果更改屏幕分辨率，请单击该按钮再次将方框居中。
您可以使用CSS flexbox来实现此目的。这里有一个链接，指向如何使用flexbox的完整指南。我希望这有帮助

否，现在浏览器的所有分辨率的所有元素都在一条垂直线上。您的分辨率允许您显示两列li的元素，因此我想将这两列居中显示给父div。如果这是您的意思，请告诉我：）
countBoxes = $('#godziny').width() / 200; alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2; if(countBoxes >= 2.65){ $('#godziny').css('margin-left', alignBoxes); } else{ $('#godziny').css('margin-left', 0); }