Question

如果上一个列表项比它更高，如何在列表项中间对齐文本？

我有以下HTML代码：

<ul class="list-inline">
    <li style="background-color: aqua;">
        <div style="height:50px;width:50px;background-color:green;display:block;">&nbsp;</div>
    </li>
    <li style="background-color: lime;">
        <div style="height:50px;background-color:green;display:block;">Brendan</div>
    </li>
    <li style="background-color: salmon;">Vogt</li>
</ul>

我正在使用Bootstrap。第一个列表项的高度和宽度必须为50px。它用于颜色。第二个列表项是纯文本。文字高度为10px。

我尝试在<li></li>中添加填充但不起作用。我尝试添加保证金但这也行不通。我已经尝试将相同内容添加到文本周围的<div></div>，也没有任何反应。似乎添加了填充和边距，但与其他元素重叠，因此看起来没有任何反应。

如何中间对齐文字？

PS：当我正在玩它时，样式是内联的，当一切正常时，它会将其移动到外部样式表。

Answer 1

你可以试试这个..

.list-inline > li div {
    margin: 10px;
    padding: 14px;
}

这是FIDDLE。

Answer 2

使用css属性inline-css for li它将适合你

<li style="text-align: center !Important;"
   </li>

或使用line-height属性

Answer 3

如果需要垂直对齐，可以使用display: table-cell属性。由于您已经拥有ul和li，因此它们可以是表格和表格行。在这种情况下，ul li > div将是允许使用vertical-align: middle的表格单元格。如果需要，您还可以设置text-align: center。

＆＃13;

.list-inline {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
.list-inline li {
    display: table-row;
}
.list-inline li > div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}
.list-inline li:nth-child(1) {
    background-color: aqua;
}
.list-inline li:nth-child(2) {
    background-color: lime;
}
.list-inline li:nth-child(3) {
    background-color: salmon;
}
.myColor {
    background-color: green;
    width: 50px;
    height: 50px;
}

＆＃13;

<ul class="list-inline">
  <li>
    <div>
      <div class="myColor"></div>
    </div>
  </li>
  <li>
    <div>Brendan</div>
  </li>
  <li>
    <div>Vogt</div>
  </li>
</ul>

＆＃13;

Answer 4

您是否希望所有列表项目都显示在一行中并且彼此垂直对齐？

如果我理解你的问题，那么这应该对你有帮助 -

<ul class="list-inline"> <li style="background-color: aqua; height:50px; width:50px; display:inline-block; vertical-align: middle;">   </li> <li style="background-color: lime; display:inline-block; vertical-align: middle;"> Brendan </li> <li style="background-color: salmon; vertical-align: middle; display: inline-block;"> Vogt </li> </ul>

Answer 5

我最终这样做了：

<ul class="list-inline">
   <li style="background-color: green;">
      <div style="padding: 15px 23px;background-color: aqua;">&nbsp;</div>
   </li>
   <li style="background-color: green;">
      <div style="padding: 15px 0 15px 0;background-color: lime;">Brendan</div>
   </li>
   <li style="background-color: green;">
      <div style="padding: 15px 0 15px 0;background-color: yellow;">Vogt</div>
   </li>
</ul>

我需要50px高和宽的第一个色块。  宽4 px，高20 px，因此为padding: 15px 23px;。在其他列表项中的文本我不太担心长度，因为文本可以是不同的长度。我只是设定了高度。文本是20px高，因此是padding: 15px 0 15px 0;。

我不是CSS专家，但这适用于我：）

如果前一个列表项比它更高，如何在列表项中居中对齐文本

5 个答案: