2017-09-07 34 views
0

私はZurb Foundationフレームワークを使用しており、テキストを中央に揃えようとしています。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> 

私は列内のテキストを中心とする正しい方法は何か聞いてみたいですか?

+0

右に行くと他のCSSが動いているのではないでしょうか?それ以外の場合は、 '.text-center { text-align:center; } ' – NateH06

答えて

1

あなたのコードでうまく動作するはずですが、あなたがスクリーンショットを提供して、右への移動が何を意味するのかが分かります。

この解決策が動作する可能性がありますが、問題が発生している可能性があります。

CSS:

word-wrap: break-word;

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

私はスタイルプロパティを追加しましたので、問題は見出し内の単語は私のモバイルデバイスのための長すぎるということでした。このFiddle

0

をお試しください

このようなケースを処理する正しい方法であるかどうかは不明ですこれは可能な解決策です。

関連する問題