text-align center受float元素的影响

Question

我有两个浮动元素,左右.

所有这些元素的父元素是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.正如您所见,文本正在向左移动(受浮动元素影响),并且不是中心.

如何使其与上面的法线对齐(如1.文本),而不受右侧和左侧浮动元素的影响？

Answer 1

你需要使用除浮动之外的东西来将元素粘在两侧.事实上,他们表现得像他们应该的那样.这是一个使用绝对定位粘在两侧的更新示例.但是,很长的内容不会尊重这些元素.

或者,如此测试中所示,您需要确保两个浮动宽度相同.

外部元素是"边缘自动"的事实是无关紧要的.