Центр div внутри ячейки таблицы, но выравнивание текста по левому краю
У меня есть обертка / список ul
и внутри него список предметов li
, ul
элемент имеет display: table-row;
и li
элемент имеет display: table-cell;
, У меня сейчас проблема в том, что я хочу li
элемент внутри списка, но выровнять текст внутри li
элемент слева.
Код выглядит так
.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>
У кого-нибудь есть идеи, как мне решить эту проблему?
4 ответа
.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>
Вы хотите что-то подобное?
.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>
Не совсем понятно, что нужно делать. Может быть, вы можете попробовать это.
.list-item {
display: table-cell;
text-align: center;
}
Попробуй это:)
.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>