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


in project have row "user name", "company phone" , "logo". asked align company phone in middle between "logo" , "user name". have problem this, because user name can between 5 , 30 characters long, can't give fixed width. company phone image (not text). demo design

demo design

please help! can't find works example. thanks.

you can use flexbox:

.container {    display: flex;  }  .phone {    flex-grow: 1; /* grow 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 demo</div>    <div class="exit">exit</div>  </div>


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -