絶対位置のDivは等価な位置合わせではありません

私の垂直divのスキルタイトル（コーディング、フレームワーク、方法論）は同等の位置にありません。絶対位置のDivは等価な位置合わせではありません

何が間違っているのか教えてください。私のCSSの知識は少し錆びています。 :)

.vc { 
    align-items: center; 
    display: flex; 
    flex-direction: row; 
    justify-content: left; 
} 

.skill .title { 
    left: -15px; 
    padding: 5px 25px; 
    position: absolute; 
    text-align: center; 
    text-transform: uppercase; 
    top: 0; 
    transform: rotate(90deg); 
}

出典

2016-05-21 Senpai

この設計の全体の問題であるjsfiddleデモリンク –

を送ってください「左中央」に起源を変換移動しようとすることもできます。あなたが幅を変化させた3種類の要素を回転させます。クラス '.skill .title'でdivのコンテナを追加することができます。すべての要素の幅が同じで、コンテナを回転させる要素がある場合 –

@SoheilGhahremaniありがとうございました。あなたはこれを答えとして書くことができます:) – Senpai

これが原因で、タイトルのtransformプロパティで起こっている可能性があります。デフォルトでは、変換元は変換するボックスの中心です。テキストの長さ、したがってボックスの幅はタイトルによって異なるため、これはメインコンテンツとは異なる回転位置になります。

あなたは

出典

2016-05-21 14:31:14

はい、それは変換のため、私は右のX軸に位置を左に中心に原点を設定する場合です。 Y軸の中央に正しく配置されていません。 Look screenshot http://puu.sh/oZU7d/6589765b3b.png 上記のコメントにjsfiddleリンクも載せてあります:)ありがとうございました – Senpai

あなたのタイトルを別のコンテナに入れて簡単に修正することができます。それらのすべてのコンテナが同じ幅を持つことを確認します。次に、title要素自体の代わりに変換を適用し、テキストをコンテナに配置すると、望ましい結果が得られるはずです。 –

絶対位置のDivは等価な位置合わせではありません

答えて

関連する問題