使两个可变宽度的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之间有space，看起来像小downward-pointing白色箭头。

我们想要实现的是让项目标题紧邻字形图标，同时让标题和字形图标本身位于屏幕中间。我们想要这样的东西：

我在 SO 上阅读了很多关于使一个 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.

中重新排列这两个元素

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

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

Make two divs of variable width adjacent and centered at the same time

html

css

glyphicons