css - 为什么居中的 HTML DIV 会根据其内容移动？

Question

我有一个应用了以下 css 类的 div:

div.centralcolumn
{
   width: 90%;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   font-size: 80%;  
   font-family: verdana, helvetica, arial, sans-serif;
   line-height: 1.6em;
   text-align: left;
}

它居中是因为自动边距将两侧的剩余空间平均分配。但是，我的一个页面将 div 绘制得比其他页面稍微靠左。检查后，div 的宽度相同 (720px)，如果我修改内容，则问题 div 会移回正确的位置。有问题的内容是一个列表项，这里是实际的 html block :

    <p>
      <a href="http://ucf.academia.edu/SebastianRisi/Papers/842358/Task_Switching_in_Multirobot_Learning_through_Indirect_Encoding">
        <strong>Task Switching in Multirobot Learning through Indirect Encoding</strong>
      </a><br/>David B. D'Ambrosio, Joel Lehman, Sebastian Risi, and Kenneth O. Stanley (2011).
      <br />
      <strong>In: Proceedings of the International Conference on Intelligent Robots and Systems (IROS 2011 San Fransisco, CA)</strong>
    </p>

最后一行文字似乎是罪魁祸首。如果我缩短它，那么问题就消失了，我尝试插入一个
来阻止文本到达 div 的边缘，但这没有效果。顺便说一句，我使用的是 Chrome 和 Firefox，都出现了这个问题。

Answer 1

我建议首先将最大宽度增加 40 像素。如果它看起来太宽，则缩短 10 像素，依此类推，直到它对您来说是完美的宽度。