Make two divs of variable width adjacent and cente

问题:

I am stuck on a rather tricky CSS problem. This is what the banner for one our pages currently looks like:

And here is the relevant 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>

As you can see, there is space between the project title and the drop down menu glyphicon, which looks like small downward-pointing white arrow.

What we would like to achieve is to have the project title immediately adjacent to the glyphicon, but also have the title and glyphicon themselves centered in the middle of the screen. Something like this is what we want:

I have read a number of posts here on SO regarding making one div fixed with the other flexible, but I couldn't find a way to apply that to the present case. Actually, I don't even know how to formulate a solution to this problem, which is why I am asking for help.

回答1:

Have look at below 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>

回答2:

try like this, it may work...

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

回答3:

display: flex; justify-content: center; will center the 2 elements in the middle (centered horizontally). And align-items: center will center them vertically.

Then you can use order on the children to re-order the elements so that the glyph is on the right, even though it comes before the h4 in the markup. Or you could just re-arrange those 2 elements in your HTML.

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