将文本居中在div列中

Question

我正在使用Zurb Foundation框架，并试图将文本置于中心。

如果我只使用.text-center类：

<h1 class="text-center">My Heading</h1>文字是中心。

但是，当我将其放在列中时，文本会稍微向右移动：

<div class="row">
    <div class="small-2 small-centered columns text-center">
        <h1>My Heading</h1>
    </div>
</div>

我想问一下在列中居中文本的正确方法是什么？

Answer 1

它应该可以正常使用你的代码，但如果你能提供屏幕截图，看看它向右移动的意思是好的。

无论如何检查这个解决方案是否可行，问题可能来自额外的自定义CSS，如果你有一个。

CSS：

  .row h1 { margin: 0 auto; padding : 0px }

试试这个Fiddle

Answer 2

问题是标题内的单词对我的移动设备来说太长了所以我添加了样式属性：

word-wrap: break-word;

不确定这是否是处理此类情况的正确方法，但这是一种可能的解决方案。