[英]Center div inside table cell but align text left
I have a wrapper/list ul
and inside it list items li
. 我有一个包装器/列表
ul
,其中有列表项li
。 The ul
element has display: table-row;
ul
元素display: table-row;
and the li
element has display: table-cell;
li
元素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. 我现在的问题是,我想中心的
li
列表内元素,但对准里面的文字li
左边的元素。
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? 有谁知道我该如何解决这个问题?
.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>
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>
Not clearly understand what you need to do. 不清楚您需要做什么。 Maybe you can try this.
也许您可以尝试一下。
.list-item {
display: table-cell;
text-align: center;
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.