0

使用している要素transform: rotate(90deg);がありますが、親要素の中央に配置されていません。

また、これを可能な限りクロスブラウザー (透明性など) にしようとしていますが、これまでのところ最高の運がありませんでした.

jsFiddle: http://jsfiddle.net/K8RXr/4

*ローテーション<している理由は、アイコンのフォント/画像を使用して将来これを置き換えるためです。

4

1 に答える 1

2

これが中央に配置されていないように見えるのは、回転させたためです。cssが変換を終了すると、通常のスタイル設定がすべて実行され、変換されます。したがって、を削除するtransformと、問題は水平方向のセンタリングにあるのではなく、垂直方向のセンタリングが問題になります。これを解決するには、追加する必要があります

display:table-cell;
vertical-align:middle;

矢印が中央に揃うように

ここにフィドルがあります

また、クロスブラウザとの互換性を高めるためのサポートが必要な場合は、 http：//prefixr.com/がこれを行うための優れたツールです。たとえば、それはあなたをに変えopacity:0.5;ます

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;

これはInternetExplorerに役立つはずです

于 2013-03-06T23:00:47.413 に答える