html - 将 <div> 与不带宽度的显示内联或内联 block 对齐

Question

在我的元素中，我有一行包含“用户名”、“公司电话”和“ Logo ”。我被要求将公司电话对齐在“ Logo ”和“用户名”之间。我对此有疑问，因为用户名的长度可以在 5 到 30 个字符之间，所以我不能给它固定的宽度。公司电话是图像(不是文本)。

求助!我找不到适合我的例子的任何东西。谢谢。

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>