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

你需要使用除浮动之外的东西来将元素粘贴到两侧。事实上，他们表现得像他们应该的那样。这是updated example使用绝对定位粘在两侧。但是，很长的内容不会尊重这些元素。

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

外部元素为“margin auto”的事实无关紧要。

Answer 2

如果您无法使用绝对位置，就像我的情况一样，因为我正在处理要打印的页面并且绝对将所有内容带出页面，您可以使用边距。只需在不同的行中写下您想要的内容，然后为您想要左右对齐的内容添加一个负的上边距（如果您在顶部写下它，则为底部）。

使用Phrogz的例子：

<div class="test">
      <div id="s0">
      1. text<br />
      2. text
   </div>
   <div id='s1'>999</div>
   <div id='s2'>Follow me</div>
</div

用css：

.test{
    width: 500px;
    text-align: center;
    background: yellow;
    line-height: 18px;
}

#s1 { text-align: right; margin-top: -18px; }
#s2 { text-align: left;  margin-top: -18px; }

您可以看到一个有效的示例here

text-align center受float元素的影响

2 个答案: