html - Align div in li as center -
here fiddle: https://jsfiddle.net/5jnnutg8/
my question how can align "something #" list items center , inline. 1 can see "hi" title aligned in center using text-align: center
in css, doesn't seem work list items.
is there pure css way of doing without messing around <div>
, <ul>
, , <li>
structure, using plugin wordpress , pain change this.
i want "something #" list items centered aligned, , if browser resized "something 3" drops down still centered -- hope makes sense.
thanks!
do not use float: left
, use display: inline-block;
li { display: inline-block; }
working demo
.list-holder { background: black; height: 100px; color: white; text-align:center; } .div-list-item { background: red; color: black; margin-left: 10px; } .ul-class { list-style: none; padding: 0; } li { display: inline-block; } { display: black; }
<div class="list-holder"> hi <ul class="ul-class"> <li class="li-class"> <div class="div-list-item"> 1 </div> </li> <li class="li-class"> <div class="div-list-item"> 2 </div> </li> <li class="li-class"> <div class="div-list-item"> 3 </div> </li> </ul> </div>
Comments
Post a Comment