dynamic centered alignment of a ul with css - html

Question

i am pulling data from database that prints in a ul li format. since data is different we may have 2 li items or we may have 10 who knows.
what is the best approach to center a ul or a div that will change in width? i know to center a div or ul i would use following:
#name, ul {
width:200px; /*set certain width */
margin:0 auto; /* center div */
display:block /* play friendly with the existing layout */
}
my problem is with the data the div may be 200px or beyond 200px, and as a result it would not truly be centered, since the div center alignment is based on width.
any help would be appreciated.

Answer 1

Here, is a way you can center a ul that has dynamic content length.
You can wrap the ul in a div and set the CSS property on the DIV as
.wrapper{
display:table;
margin: 0 auto;
}
This will center align the ul inside the div irrespective of the width of the div, you can see an example below:
Codepen Link http://codepen.io/nadirlaskar/pen/RKbBpM
.wrapper{
display:table;
margin: 0 auto;
background-color:yellow;
}
ul{
background-color:red;
}
li{
background-color:blue;
}
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2 is now large</li>
</ul>
</div>