Html 将特定内联li与ul中心对齐

我有这个html结构

<div class="top_menu">
    <ul>
        <li class="left"><a href="" class="family-filter">asdas</a></li>
        <li class="welcome">Welcome <span class="username">Guest</span></li>
        <li class="right"><a href="#">Login</a></li>
    </ul>
</div>

我正在尝试对齐。欢迎来到中间。顶部菜单>ul。我已经尝试了上述方法和以下方法：

.中心{ 左边距：自动； 右边距：自动； 显示：块； 明确：两者皆有； }

但是没有成功，有什么想法吗

文本对齐：居中；需要设置为父级。因此，请将其从。欢迎使用。顶部菜单ul:

文本对齐：居中；需要设置为父级。因此，请将其从。欢迎使用。顶部菜单ul:

您正在定义。请在定义li的全局样式之前使用。这意味着.top_菜单中的任何样式都将覆盖.welcome display:block；中的样式；。如下所示：

.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

.top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

更新

通过绝对定位外部li标记，可以防止它们将中心li推离中心

像这样，为了清晰起见，我只添加了其他样式：

.top_menu ul { position: relative; }
.top_menu ul .left { position: absolute; left: 0; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul .right { position: absolute; right: 0; }

或者，您可以将.left和.right与它们的浮动保持一致，只需将中心元素的位置完全如下所示：

.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

.top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

如果使用上述方法，请确保左边距为宽度的一半。必须为此方法指定宽度。如果您只是将其设置为大于内容，它将使内容居中，因为文本“align:center”（对齐：居中），因此这应该不是您正在定义的问题。在定义li的全局样式之前，欢迎使用。这意味着.top_菜单中的任何样式都将覆盖.welcome display:block；中的样式；。如下所示：

.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

.top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

更新

通过绝对定位外部li标记，可以防止它们将中心li推离中心

像这样，为了清晰起见，我只添加了其他样式：

.top_menu ul { position: relative; }
.top_menu ul .left { position: absolute; left: 0; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul .right { position: absolute; right: 0; }

或者，您可以将.left和.right与它们的浮动保持一致，只需将中心元素的位置完全如下所示：

.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

.top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

---

如果使用上述方法，请确保左边距为宽度的一半。必须为此方法指定宽度。如果您只是将其设置为大于内容，它将使内容居中，因为文本“align:center”（对齐：居中），所以这应该不是问题

尝试显示：块；保证金：0自动！重要的谢谢你，本，但那也不行；保证金：0自动！重要的谢谢Ben，但那也不行。那只是一个测试，无论哪种方式都不行。将内联块更改为只编辑blockAnswer，它不在中间的原因是与左浮动有关。向所有元素添加边框，并尝试从此处调试它。现在我来看看，我把它拿回去，我想你已经给盒子设置了一个宽度，没有把它和中心对齐。请尝试对齐的文本。欢迎使用“居中”并查看是否有差异。使浮动元素绝对位于顶部：0和左侧：0/右侧：0。确保ul处于相对位置，这只是一个测试，无论哪种方式它都不会去。将内联块更改为仅块应答编辑，它不在中间的原因与左侧浮动有关。向所有元素添加边框，并尝试从此处调试它。现在我来看看，我把它拿回去，我想你已经给盒子设置了一个宽度，没有把它和中心对齐。请尝试对齐的文本。欢迎使用“居中”并查看是否有差异。使浮动元素绝对位于顶部：0和左侧：0/右侧：0。确保ul相对位置正确。它似乎将项目置于可用空间的中心。因此，如果左浮动元素比右浮动元素宽，则居中的元素将移到右侧：您能想到任何可能的解决方案吗？您是正确的。它似乎将项目置于可用空间的中心。因此，如果左浮动元素比右浮动元素宽，则居中元素将移到右侧：您能想到任何可能的解决方案吗？