2017-11-02 30 views
1

JSを使用して2つの異なるテキストサイズを同じ行の中央に配置することは可能ですか?同じ行の2つの異なるテキストサイズを水平方向に水平に整列する方法

.big { 
 
    font-size: 60px; 
 
} 
 

 
.small { 
 
    font-size: 20px; 
 
}
<div class="parent"> 
 
    <span class="big">ABCD.EF</span> 
 
    <span class="small">ABC</span> 
 
</div>

困難な事がある:私は(すなわち、それはABC.DEまたはA.BC.可能性があり、これはABCD.EFは、文字の多かれ少なかれ番号に変更する可能性があるので、動的に実現する必要があります..)

ありがとう!

+0

どのようにあなたの問題を解決しましたか? – Scott

答えて

1

あなたが探しているのはフレックスボックスだと思います。使用方法についてはthis tutorialをご覧ください。

あなたは他の方法でアイテムを揃えたい場合

は、

+0

Flexboxは、まだすべてのブラウザでサポートされていません。最終的には、私はその日を喜ぶでしょう。これは、ユーザーが使用しているブラウザーを知っていれば良い解決策です。 – Scott

+1

@Scottどのブラウザを参照していますか? https://caniuse.com/#search=flexbox – samcorcos

+1

IEのすべてが部​​分的なサポートを受けています。つまり、どのフレックスボックス機能を使用するか注意する必要があります。ベンダープレフィックスも必要な場合があります。 IE9とそのすべてはそれをまったくサポートしていません。最小高さが使用されている場合、IE11でもこの正確な質問に影響を与えるようです。参照:「IE 11は、最小高さが使用されているときに項目を正しく垂直に配置しません」 – Scott

0

.parent { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 

 
.big { 
 
    font-size: 60px; 
 
} 
 

 
.small { 
 
    font-size: 20px; 
 
}
<div class="parent"> 
 
    <span class="big">ABCD.EF</span> 
 
    <span class="small">ABC</span> 
 
</div>
flex-direction: row;はスパンに vertical-align: middle;を追加します。これを試してみてください:

.big { 
 
    font-size: 60px; 
 
    vertical-align: middle; 
 
} 
 

 
.small { 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
}
<div class="parent"> 
 
    <span class="big">ABCD.EF</span> 
 
    <span class="small">ABC</span> 
 
</div>

かそこらのようにあなたは、あなたの親クラス内のすべてのスパンをターゲットにできます。

.parent span { 
    vertical-align: middle; 
} 
関連する問題