在div列中居中文本

问题描述：

我正在使用Zurb基础架构并试图居中文本。在div列中居中文本

如果我只是用.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>

我要问什么是中心柱内的文本的正确方法是什么？

我会怀疑有其他CSS正在采取行动，如果它是在右边，是吗？否则，您只需使用'.text-center {text-align：center; }' – NateH06

答

它应该可以在你的代码中正常工作，但是如果你可以提供屏幕截图来看看你向右移动你的意思会不错。

无论如何检查此解决方案可能工作，并且问题可能来自额外的自定义CSS添加，如果你有一个。

CSS：

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

试试这个Fiddle

答

的问题是，在标题里面的字是我的移动设备太长，所以我说的样式属性：

word-wrap: break-word;

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