如何將所有列表的元素居中到父div

-1

我將動態添加元素到我的ul塊。我想將所有列表的元素居中父div（棕色boder）。例如，如果瀏覽器的分辨率允許您在一行中設置兩個塊，我想將此行與父div相關中心。如何將所有列表的元素居中到父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>

來源

2015-10-11 user3557849

添加此行：

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;

}

編輯

這僅僅是與引導一個快速的解決方案也許它可以幫助你一點點。 jsfiddle

jQuery的

在此行中我加入自舉類：

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

此代碼中心的盒子（是不是最好的解決方案，但它的工作原理）：

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); 
}

如果您更改屏幕的分辨率，請單擊該按鈕以再次居中您的框。

來源

2015-10-11 13:56:37

不，現在在瀏覽器的所有分辨率的單個垂直行中的所有元素。你的決議允許你顯示李的元素的兩列，所以我想中心這兩個columnt父母的div – user3557849

請讓我知道，如果這就是你的意思:) –

您可以使用CSS flexbox來實現此目的。以下鏈接提供了有關如何使用Flexbox的完整指南。我希望這有幫助。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-10-11 14:26:27

如何將所有列表的元素居中到父div

回答

相關問題