html - Center an unordered list of boxes -
i have unordered list of boxes. want attracted towards center of window instead of left side of window are.
is there function can use this? have attached css , html below reference.
#ul_1 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 216px; text-align: center; text-size-adjust: 100%; width: 790px; column-rule-color: rgb(102, 102, 102); perspective-origin: 395px 108px; transform-origin: 395px 108px; border: 0px none rgb(225, 225, 225); font: normal normal normal normal 15px / 24.75px verbregular; margin: 0px; outline: rgb(102, 102, 102) none 0px; padding: 0px; } /*#ul_1*/ #li_2 { box-sizing: border-box; color: rgb(25, 25, 25); display: block; float: left; height: 39px; text-align: center; text-size-adjust: 100%; width: 156.656px; column-rule-color: rgb(25, 25, 55); perspective-origin: 78.3281px 19.5px; transform-origin: 78.3281px 19.5px; background: rgb(96, 106, 113) none repeat scroll 0% 0% / auto padding-box border-box; border-top: 0px none rgb(25, 25, 25); border-right: 1px solid rgb(04, 04, 24); border-bottom: 0px none rgb(25, 25, 25); border-left: 0px none rgb(22, 25, 25); border-radius: 5px 0 0 5px; font: normal normal normal normal 15px / 24.75px verbregular; margin: 2.5px 2.5px; outline: rgb(55, 55, 55) none 0px; padding: 7.5px 22.5px; } /*#li_2*/ #li_23 { box-sizing: border-box; color: rgb(25, 55, 55); display: block; float: left; height: 39px; text-align: center; text-size-adjust: 100%; width: 80.5156px; column-rule-color: rgb(25, 55, 55); perspective-origin: 40.25px 19.5px; transform-origin: 40.25px 19.5px; background: rgb(58, 140, 174) none repeat scroll 0% 0% / auto padding-box border-box; border-top: 0px none rgb(25, 25, 25); border-right: 0px none rgb(25, 55, 55); border-bottom: 0px none rgb(25, 25, 25); border-left: 0px none rgb(25, 25, 25); border-radius: 0 5px 5px 0; font: normal normal normal normal 15px / 24.75px verbregular; margin: 2.5px 2.5px; outline: rgb(255, 255, 255) none 0px; padding: 7.5px 22.5px; } /*#li_23*/
<ul id="ul_1"> <ul class="center"> <li id="li_2"> </li> <li id="li_3"> b </li> <li id="li_4"> c </li> <li id="li_5"> d </li> <li id="li_6"> e </li> <li id="li_7"> f </li> <li id="li_8"> . . . . </li> </ul>
i think want li inline , centered in page. if think correctly simple:
li { width: 50px; height: 10px; background: red; display: inline-block; } ul { text-align: center; }
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
Comments
Post a Comment