Machen Sie zwei divs mit variabler Breite neben und zentriert zur gleichen Zeit

Question

Ich bin auf einem ziemlich kniffligen CSS-Problem stecken. Dies ist, was das Banner für eine unsere Seiten sieht derzeit wie:

Und hier ist der entsprechende HTML-Code:

<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> 

Wie Sie sehen können, gibt es Raum zwischen dem Projekttitel und das Dropdown-Menü Glyphon, das wie ein kleiner nach unten zeigender weißer Pfeil aussieht.

Wir möchten erreichen, dass der Projekttitel unmittelbar neben dem Glyphon steht, aber auch der Titel und das Glyphon selbst in der Mitte des Bildschirms zentriert sind. So etwas ist, was wir wollen:

ich eine Reihe von Beiträgen hier gelesen habe, auf SO in Bezug auf ein div mit dem anderen flexiblen festen machen, aber ich kann nicht einen Weg zu beantragen, dass auf denen findet vorliegender Fall. Eigentlich weiß ich nicht einmal, wie ich eine Lösung für dieses Problem formulieren soll. Deshalb bitte ich um Hilfe.

Answer 1

sich auch unter Snippet

<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

wie diese versuchen, kann es funktionieren ...

 <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; werden die 2 Elemente in der Mitte zentriert (zentriert horizontal). Und align-items: center wird sie vertikal zentrieren.

Dann können Sie order auf die Kinder verwenden, um die Elemente neu zu ordnen, so dass die Glyphe auf der rechten Seite ist, obwohl es vor der h4 in der Markup kommt. Oder Sie könnten einfach diese 2 Elemente in Ihrem HTML neu anordnen.

<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>