在div列中居中文本

Question

我正在使用Zurb基礎架構並試圖居中文本。

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

不確定這是否是處理此類情況的正確方法但它是一個可能的解決方案。