Html 如果上一个列表项比上一个列表项高，如何将列表项中的文本居中对齐

如果上一个列表项比它高，如何将列表项中的文本中对齐

我有以下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>

布伦丹

Vogt

我正在使用

Bootstrap

。第一个列表项的高度和宽度必须为50px。它是用来做颜色的。第二个列表项是纯文本。文本高度为10px

我尝试在

中添加填充，但不起作用。我试着增加保证金，但这也不起作用。我试着在文本周围的

中添加相同的内容，但也没有任何效果。似乎添加了填充和边距，但与其他元素重叠，因此看起来什么也没有发生

如何将文本中对齐

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

你可以试试这个

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

这是答案。

你可以试试这个

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

---

以下是。

为li使用css属性内联css，它将适用于您

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

---

使用css属性inline css for li，它将适用于您

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

如果需要垂直对齐，可以使用
display:table cell
属性。由于您已经有了
ul
和
li
，因此它们可以是相应的表和表行。在这种情况下，
ul li>div
将是允许使用
垂直对齐：中间
的表格单元格。如果需要，您还可以设置
文本对齐：居中


。内联列表{
显示：表格；
宽度：100%；
保证金：0；
填充：0；
}
.李先生{
显示：表格行；
}
.list inline li>div{
显示：表格单元格；
垂直对齐：中间对齐；
高度：50px；
}
.列表内联li:n个子项（1）{
背景色：浅绿色；
}
.列表内联li:n个子项（2）{
背景色：石灰；
}
.列表内联li:n个孩子（3）{
背景颜色：鲑鱼；
}
霉色{
背景颜色：绿色；
宽度：50px；
高度：50px；
}




布伦丹


沃格特

如果需要垂直对齐，可以使用
显示：表格单元格
属性。由于您已经有了
ul
和
li
，因此它们可以是相应的表和表行。在这种情况下，
ul li>div
将是允许使用
垂直对齐：中间
的表格单元格。如果需要，您还可以设置
文本对齐：居中


。内联列表{
显示：表格；
宽度：100%；
保证金：0；
填充：0；
}
.李先生{
显示：表格行；
}
.list inline li>div{
显示：表格单元格；
垂直对齐：中间对齐；
高度：50px；
}
.列表内联li:n个子项（1）{
背景色：浅绿色；
}
.列表内联li:n个子项（2）{
背景色：石灰；
}
.列表内联li:n个孩子（3）{
背景颜色：鲑鱼；
}
霉色{
背景颜色：绿色；
宽度：50px；
高度：50px；
}




布伦丹


沃格特

我最后是这样做的：

<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高和宽。
宽4px，高20px，因此
填充：15px 23px。其他列表项中的文本我不太担心长度，因为文本的长度可以不同。我刚把它调高了。文本是20px高，因此
填充：15px 0 15px 0

我不是CSS专家，但这对我来说很有用：）
我最终是这样做的：

<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高和宽。
宽4px，高20px，因此
填充：15px 23px。其他列表项中的文本我不太担心长度，因为文本的长度可以不同。我刚把它调高了。文本是20px高，因此
填充：15px 0 15px 0

我不是CSS专家，但这对我来说很有用：）
是否希望所有列表项都显示在一行中，并且彼此垂直对齐

如果我正确理解了你的问题，那么这将对你有所帮助-



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

如果我正确理解了你的问题，那么这将对你有所帮助-



Brendan
Vogt
期望这样的东西？？？@krish您的代码根本无法正确显示期望这样的东西？？？@krish Your