levkaster levkaster - 6 months ago 14
CSS Question

Align <div> with display inline or inline-block without width

In my project I have a row with "User name", "Company phone" and "Logo". I was asked to align company phone in the middle between "Logo" and "User name". I have a problem with this, because user name can be between 5 and 30 characters long, so I can't give it fixed width. The company phone is image (NOT TEXT).
Demo for design

Demo for design

Please help! I can't find anything that works for my example. Thanks.

Answer

You can use 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>