2011-06-18 15 views
3

私は、ページの左上隅に三角形のイメージがあり、下部に(CSS3 transform: rotateを使用して)その内側にセンタリングする必要があるテキストがあります。私はいくつかの位置/マージンでそれを行うことができますが、ブラウザ間で同じに見えません、それは左または右に少し表示されます。CSS3のセンタリングテキストが三角形の内側にある

すべてのブラウザで均等に表示されるように中央に配置する方法はありますか?

exampleを作成しました。ここで私は三角形を作るのにCSSを使っていますが、現実にはイメージを使っています。

私は提案を感謝します。

+0

CSSをリセットしてみましたか? http://developer.yahoo.com/yui/3/cssreset/ – Ashley

答えて

3

ベース幅が三角形であることがわかっている場合は、テキストコンテナのwidth:をベース幅のtext-align: center;に設定して回転させます。テキストコンテナの中心点もベースの中心点であることを確認してください。

いくつかの計算の後、私は例を作成しました:http://jsfiddle.net/VScFS/57/。 ChromeとFirefoxで同じように見えます。

とにかく、私は問題が絶対的な位置付けに関係していると思います。

+0

ありがとうatlavis。私は、テキストコンテナのdivといくつかの問題があった、私はそれを三角形のベースと同じ幅に設定するだろうが、何らかの理由でテキストはクロム(私はそれが他のブラウザよりも大きいフォントをレンダリングすると思う)2行に分割されます。私はdivに余分な幅を与えなければならなかったが、テキストはオペラとFFを中心に見えなかった。あなたの考えに基づいて、私はいくつかの計算を行い、私がそれを望んでいた方法にかなり近づけました。 – brunn

関連する問題