Center div inside table cell but align text left

Question

I have a wrapper/list ul and inside it list items li . The ul element has display: table-row; and the li element has display: table-cell; . The problem I have now is that I want to center the li element inside the list but align the text inside the li element on the left.

The code looks like this

 .list-wrapper { display: table; margin: 0; position: relative; table-layout: fixed; width: 100%; } .list { display: table-row; width: 100%; } .list-item { display: table-cell; text-align: center; } .item-link { text-align: left; } 

 <div class="list-wrapper"> <ul class="list"> <li class="list-item"> <a class="item-link"> Text over more lines. Align me left but my parent centered. </a> </li> <li class="list-item"> <a class="item-link"> Also centered. </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> <li class="list-item"> <a class="item-link"> Text. </a> </li> </ul> </div> 

Does anyone have an idea how I can solve this problem?

Answer 1

 .list { display: table-row; width: 100%; } .list-item { display: table-cell; } 

 <ul class="list"> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> </ul> 

Answer 2

Do you want something like that?

 .list-wrapper { display: table; margin: 0; position: relative; table-layout: fixed; width: 100%; } .list { display: table-row; width: 100%; } .list-item { display: table-cell; padding-right:2%; padding-left:2%; } .item-link { text-align: left; } 

 <div class="list-wrapper"> <ul class="list"> <li class="list-item"> <a class="item-link"> Text over more lines. Align me left but my parent centered. </a> </li> <li class="list-item"> <a class="item-link"> Also centered. </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. Align me left. </a> </li> <li class="list-item"> <a class="item-link"> Text. </a> </li> </ul> </div> 

Answer 3

Not clearly understand what you need to do. Maybe you can try this.

.list-item {
    display: table-cell;
    text-align: center;
}

Answer 4

Try this :)

 .list-wrapper { display: table; margin: 0; position: relative; table-layout: fixed; width: 100%; } .list { display: table-row; width: 100%; } .list-item { display: table-cell; text-align: center; } .item-link { text-align: left; } .alignLeft{ text-align: left; } 

 <div class="list-wrapper"> <ul class="list"> <li class="list-item"> <a class="item-link"> Here is someText textover more lines. <p class="alignLeft">Align me left but my parent centered.</p> </a> </li> <li class="list-item"> <a class="item-link"> Here is someAlso textcentered. <p class="alignLeft">Align me left.</p> </a> </li> <li class="list-item"> <a class="item-link"> Here is some text. <p class="alignLeft">Align me left.</p> </a> </li> <li class="list-item"> <a class="item-link"> Here is some textText. <p class="alignLeft">Align </p> me left. </a> </li> </ul> </div>