css - 受 float 元素影响的文本对齐中心

Question

我有两个 float 元素，右边和左边。

它们的父元素都是 text-align: center, margin: auto:

<div class="test">
1. text
    <br>
    <span id='small_font10' style='float: left;'>999</span>
<a class='writeSComment' id='small_font10' data-id='<?php echo $id; ?>' style='cursor: pointer'>
<strong>2. text</strong>
</a>
<span id='small_font10' style='float: right;'> 
Follow me
</div>

.test{
    width: 500px;
    text-align: center;
    margin: auto;
    background: red;
}

http://jsfiddle.net/KRWNs/

如果您看到 1. 文字，那就是中心。 2. 如您所见，文本正在向左移动(受到 float 元素的影响)，而不是居中。

如何使它像上面的正常对齐(如 1. 文本)，而不受右侧和左侧 float 元素的影响？

Answer 1

您需要使用除 float 之外的其他方法将元素粘贴到两侧。事实上，他们的行为是他们应该做的。这是一个 updated example使用绝对定位来坚持双方。但是，非常长的内容将不符合这些元素。

或者，如 this test 中所示，您需要确保两个 float 的宽度相同。

外部元素是“margin auto”这一事实无关紧要。