导航栏，标题在中心，按钮在右边

Question

So I'm attempting to create a navbar with a title in the center and a button that appears to the right. As you can see, when I attempt to do it, the button appears on the next line and out of the div:

Fiddle

 .title-bar { background-color: #48A6B8; font-style: italic; margin-bottom: 3%; color: #fff; } .title { text-align: center; font-size: 36px; line-height: 180%; } .buts { float: right; }

 <div class="title-bar"> <div class="title">Title</div> <div class="button"> <button class="buts">Whats Up</button> </div> </div>

display:inline-block seems to remove the centering of the text so I can't use that...

Thanks in advance!

Answer 1

Use flexbox

flex: 1 0 auto; will make title flexible, it will acquire all available free space in flex-container .

 .title-bar { background-color: #48A6B8; font-style: italic; margin-bottom: 3%; color: #fff; display: flex; } .title { text-align: center; font-size: 36px; line-height: 180%; flex:1 0 auto; }

 <div class="title-bar"> <div class="title">Title</div> <div class="button"> <button class="buts">Whats Up</button> </div> </div>

---

Edit: after @burak's comment that it's not in exactly center.

As you can see in the below image, some of the space is acquired by the Whats Up button, that's why title is not in the exact center but Text is in the exact center of it's parent.

We can make it in exact center as well, but for that we'll need to shift Whats Up button on another layer, by using position:absolute

 .title-bar { background-color: #48A6B8; font-style: italic; margin-bottom: 3%; color: #fff; display: flex; position:relative; } .title { text-align: center; font-size: 36px; line-height: 180%; flex:1 0 auto; background:rgba(0,0,0,.5) } .button{ position:absolute; right:0; top:0; }

 <div class="title-bar"> <div class="title">Title</div> <div class="button"> <button class="buts">Whats Up</button> </div> </div>

Answer 2

I used a flexbox for the title bar and let the required margin at the left be calculated automatically.

 .title-bar { display: flex; justify-content: center; width: 100%; } .title, .button { margin-left: auto; }

 <div class="title-bar"> <div class="title">Title</div> <div class="button"> <button class="buts">Whats Up</button> </div> </div>

Answer 3

Use display:inline; so that title and button both will appear on same line.

Answer 4

 .title-bar { background-color: #48A6B8; font-style: italic; margin-bottom: 3%; color: #fff; display: flex; position:relative; } .title { text-align: center; font-size: 36px; line-height: 180%; flex:1 0 auto; } .buttonRight{ position:absolute; right:0; top:0; padding:5px; }

 <div class="title-bar"> <div class="title">Title</div> <div class="buttonRight"> <button class="btn btn-primary">Whats Up</button> </div> </div>