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

【问题标题】：Make two divs of variable width adjacent and centered at the same time使两个可变宽度的 div 同时相邻并居中
【发布时间】：2017-02-23 13:49:23
【问题描述】：

我陷入了一个相当棘手的 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>

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

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

我在这里阅读了一些关于使一个 div 与另一个灵活的 div 固定的帖子，但我找不到将其应用于当前案例的方法。实际上，我什至不知道如何制定解决此问题的方法，这就是我寻求帮助的原因。

【问题讨论】：

你应该使用 Flexbox Tim.

标签： html css glyphicons

【解决方案1】：

看看下面的sn-p

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

【讨论】：

这似乎在桌面上工作，但在移动设备上测试时它不起作用，这也阻止了省略号工作。
你能在手机上给我看一下输出吗，你还必须给h4固定宽度才能使省略号起作用
这是<h4> 可以具有可变宽度的要求之一，因为我们不知道标题可能有多长。我们希望标题占据所有可用空间，除了字形。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

嗨迈克尔，这在桌面模式下工作（它显然在你的演示中工作），但它在移动视图上存在问题。具体来说，标题和字形在移动端视图中被截断了。
@TimBiegeleisen 你还需要帮助吗？看起来您已经接受了答案。
另一个答案对我有用，但感谢发帖。问题是，我有一个移动视图。