使两个可变宽度的div相邻并且同时居中

Question

我陷入了一个相当棘手的CSS问题。这就是我们页面目前的横幅：

以下是相关的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>

如您所见，项目标题和下拉菜单glyphicon之间有空格，看起来像一个小的向下指向的白色箭头。

我们想要实现的是让项目标题紧邻glyphicon，但标题和glyphicon本身也位于屏幕中间。这样的事情就是我们想要的：

我在这里看了很多关于将一个div固定在另一个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中重新排列这两个元素。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;