对齐 <div> 内联显示或内联显示块，不带宽度

Question

在我的项目中，我有一排带有“用户名”，“公司电话”和“徽标”的行。 我被要求将公司电话放在“徽标”和“用户名”之间的中间。 我有一个问题，因为用户名的长度可能在5到30个字符之间，所以我不能给它提供固定的宽度。 公司电话为图片（NOT TEXT）。

请帮忙！ 我找不到适合我的示例的任何内容。 谢谢。

Answer 1

您可以使用flexbox：

 .container { display: flex; } .phone { flex-grow: 1; /* Grow to fill avilable space */ text-align: center; /* Center contents */ } 

 <div class="container"> <div class="logo">Logo</div> <div class="phone">1-999-999-999</div> <div class="name">User name</div> <div class="exit">Exit</div> </div> <div class="container"> <div class="logo">Logo</div> <div class="phone">1-999-999-999</div> <div class="name">Very long user name for this demo</div> <div class="exit">Exit</div> </div>