How to center content horizontally without overlapping items on the side

Question

I'm trying to create a view layout that is similar to iOS's UINavigationBar:

UINavigationBar has a title that is centered on the screen and optional navigation items (buttons) on either side. If the title is too wide to fit in the center, then it will be pushed to the side to avoid overlapping the navigation items.

Is such a layout possible in CSS alone without JavaScript?

Here's a fiddle I created with some attempts to achieve this layout.

In the screenshot above, the layout is achieved by floating the red and blue buttons on either side, and setting the left and right margin of the yellow div to auto . The second row above is exactly what I want, but unfortunately I have to set an explicit width on the yellow div.

I also tried flexbox but it doesn't allow me to center the yellow div with respect to the container.

If there is no way to avoid using JavaScript in this situation, what would be the best way (most compatible with each browser) to achieve it?

Answer 1

Place left/right columns with Absolute Positioning.

.left,
.right {
  position: absolute;
}
.left {
  left: 0;
}

.right {
  right: 0;
}
.center {
  padding: 0 200px; // Add indents so columns don't overlap its content.
}

 .row { border: 1px solid black; position: relative; margin: 20px 0; padding: 5px 0; } .left, .right { position: absolute; } .left { background-color: red; width: 200px; left: 0; } .right { background-color: cyan; right: 0; } .center { margin: 0 auto; background-color: yellow; text-align: center; white-space: nowrap; padding: 0 200px; } .fixed { width: 130px; } .zero { width: 0px; } 

 <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center">center center center</div> </div> <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center">center center center</div> </div> <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center">center center center</div> </div> 

Answer 2

You can achieve the center div exactly in the middle of row by using position: absolute irrespective of the position of left & right.

Also, provide position: relative to left & right with a higher z-index for them to appear above center .

Refer code:

 .row { border: 1px solid black; margin: 20px 0; padding: 5px 0; position: relative; height: 18px; } .left { float: left; background-color: red; width: 200px; position: relative; z-index: 2; } .right { float: right; background-color: cyan; position: relative; z-index: 2; } .center { margin: 0 auto; background-color: yellow; text-align: center; white-space: nowrap; } .absolute { position: absolute; left: 0; right: 0; } .zero { width: 0px; } @media only screen and (max-width: 565px) { .absolute { left: 200px; padding-left: 20px; text-align: left; } } 

 <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center">center center center</div> </div> <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center absolute">center center center</div> </div> <div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center zero">center center center</div> </div> 

Answer 3

change floats to absolute positioning, with "row" as their "anchor"

.row{
 position: relative
}

.left,
.right {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

Answer 4

You could give these properties to the yellow div:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;