可変幅の2つのdivを同時に隣接させて中央に配置する

Question

かなり難しいCSSの問題に悩まされています。これは、1つの私達のページのバナーは、現在、次のようになります。

そしてここでは、関連するHTMLコードです：あなたが見ることができるように

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px"> 
    <div style="float: right"> 
     <i class="glyphicon project-switcher glyphicon-chevron-down"></i> 
    </div> 
    <div> 
     <h4 style="white-space: nowrap; overflow:hidden; 
        text-overflow: ellipsis">Some Project Title</h4> 
    </div> 
</div> 

、プロジェクト・タイトルの間にスペースがあると小さな下向きの白い矢印のように見えるドロップダウンメニューのグリフコン。

私たちが達成したいのは、プロジェクト名をグリフコンのすぐ隣に置くことですが、タイトルとグリフィコン自体が画面の中央に配置されています。このような何かは、私たちが望むものである：

私はSO、他の柔軟で固定1つのdivを作るについての上のここでの記事の数を読みましたが、私はにそれを適用する方法を見つけることができませんでした現在のケース。実際には、私はこの問題の解決策をどのように策定するのかも知らないので、なぜ私は助けを求めています。

Answer 1

以下を見てくださいが

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px; text-align:center; border:1px solid #000"> 
 
    
 
    <div style=" display: inline-block; vertical-align: middle; max-width:90%"> 
 
     <h4 style="white-space: nowrap; overflow:hidden; 
 
        text-overflow: ellipsis;">Some Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project T</h4> 
 
    </div> 
 
    <div style="display: inline-block; vertical-align: middle;"> 
 
     <i class="glyphicon project-switcher glyphicon-chevron-down">i</i> 
 
    </div> 
 
</div>

Answer 2

はこのようにしてみてください、それが動作する可能性がありスニペット...

 <div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px"> 


     <h4 style="white-space: nowrap; overflow:hidden; 
        text-overflow: ellipsis">Some Project Title <i class="glyphicon project-switcher glyphicon-chevron-down"></i></h4> 

</div> 

Answer 3

display: flex; justify-content: center;は、中心（真ん中に2つの要素を中心に説明します水平に）。 align-items: centerは、それらを垂直に中央に配置します。

次に、子要素にorderを使用して、要素の並べ替えを行い、グリフがマークアップ内のh4の前に来るようにすることができます。あるいは、HTML内に2つの要素を並べ替えることもできます。

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px; display: flex; align-items: center; justify-content: center;"> 
 
    <div style="order: 1;"> 
 
    <i class="glyphicon project-switcher glyphicon-chevron-down">(glyph)</i> 
 
    </div> 
 
    <div> 
 
    <h4 style="white-space: nowrap; overflow:hidden; text-overflow: ellipsis">Some Project Title</h4> 
 
    </div> 
 
</div>