在UL和左对齐文本中，将带更多li元素的li元素居中

Question

I have the following setup: JSFiddle example

I have a main ul that contains several li elements. I want to center these li elements within the ul. Unfortunatly I havent been able to do this have been struggeling with it.

This li element also contains an ul and again more li elements. I am also trying to allign these final li elements.

The markup of this element is like this:

 <li><em>Order ID </em>1304129149</li> 

The em part should be aligned left and the rest should be right. I can only do one of the two.

Any ideas what I am missing?

Kind regards

Answer 1

Alignment is applied to old child elements. To align different elements to left and right of parent you can use float:

 ul { list-style: none; } li { width: 400px; text-align: right; } li em { float: left; } 

 <ul> <li><em>Order ID </em>1304129149</li> </ul> 

UPDATE:

Of course it can works in your code too. Just carefully check what you do:

 #content { min-width: 100%; padding: 15px; margin: 0 auto; } .details-table > li { background-color: #FFFFFF; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 0 10px rgba(0,0,0,.15); outline: 1px solid transparent; float: left; margin: 0 20px 20px 0; list-style-type: none; } .details-table-header { height: auto; text-align: center; color: #fff; background-color: #ff1a00; } .details-table-data { list-style-type: none; padding-left: 0; } .details-table-data li { text-align: right; padding: 4px; } em { float: left; } 

 <div id="content"> <ul class="details-table"> <li> <header class="details-table-header"><h2>Algemeen</h2></header> <div class="details-table-body"> <ul class="details-table-data"> <li><em>Bestelling ID</em>8</li> <li><em>Winkel</em>eFor</li> <li><em>Order ID </em>1304129149</li> </ul> </div> </li> <li> <header class="details-table-header"><h2>Algemeen</h2></header> <div class="details-table-body"> <ul class="details-table-data"> <li><em>Bestelling ID</em>38</li> <li><em>Winkel</em>eFor</li> <li><em>Order ID </em>130413429149</li> </ul> </div> </li> </ul> </div>