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).
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
Post a Comment