CSS: How to align elements around a centered element?

Question

I am trying to create a simple three-part page navigation:

• Several previous page numbers (if any)
• Current page number (this should be centered)
• Several upcoming page numbers (if any)

The important thing is that the current page number is always horizontally centered in the parent container. The remaining two parts should evenly distribute the remaining horizontal space.

This JSFiddle illustrates my two attempts to solve this problem.

Solution 1 : use text-align: center . This achieves the desired result, but only if both sides are equal in width. If not the current page number will not be in the center.

HTML

 <div class="container"> <input type="button" value="47"> <input type="button" value="48"> <input type="button" value="49"> <input type="text" size="5" maxlength="5" value="50"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div> 

CSS

 .container, input { text-align: center; } 

Solution 2 : use the specified widths manually to evenly distribute horizontal space. This effectively centers the current page number under any circumstances, but this requires strict coding.

HTML

 <div class="container"> <div class="left"> <input type="button" value="47"> <input type="button" value="48"> <input type="button" value="49"> </div> <div class="right"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div> <div class="center"> <input type="text" size="5" maxlength="5" value="50"> </div> </div> 

CSS

 .left { width: 40%; float: left; text-align: right; } .right { width: 40%; float: right; text-align: left; } .center { width: 20%; margin-left: 40%; } 

None of these solutions really do what I want. Is there a way for the current page number to be centered, allowing other elements to fit their natural size, rather than an arbitrary pixel or percentage width?

Answer 1

You should use flex and float properties together, check out my solution:

 .container { display: -webkit-flex; /* Safari */ display: flex; } .container, input { text-align: center; } .container:after { content:""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; border-left: 2px dotted #ff0000; } .left { display: inline-block; flex: 1; } .left input { float: right; } .right { display: inline-block; flex: 1; } .right input { float: left; } .center { display: inline-block; } 

 <div class="container"> <div class="left"> <input type="button" value="48"> <input type="button" value="49"> </div> <div class="center"> <input type="text" size="5" maxlength="5" value="50"> </div> <div class="right"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div> </div> 

Answer 2

Try using this CSS table table.

 .container { width: 100%; display: table; border-collapse: collapse; table-layout: fixed; } .left, .center, .right { display: table-cell; border: 1px solid red; text-align: center; } .center { width: 50px; } 

 <div class="container"> <div class="left"> <input type="button" value="47"> <input type="button" value="48"> <input type="button" value="49"> </div> <div class="center"> <input type="text" size="5" maxlength="5" value="50"> </div> <div class="right"> <input type="button" value="51"> <input type="button" value="52"> <input type="button" value="53"> </div> </div> 

jsfiddle

Answer 3

You can use the CSS display property with the flex value in the wrapper and the flex property in the files.

To learn more about this, check out the following resource: Complete Flexbox Guide

Here is an example:

 .wrapper { display: flex; } .wrapper > div { text-align: center; flex: 1; border: 1px solid #000; } 

 <div class="wrapper"> <div> <button>1</button> <button>2</button> </div> <div> <button>3</button> </div> <div> <button>4</button> <button>5</button> <button>6</button> </div> </div> 

Answer 4

Here is a solution you can consider:

Use hidden buttons to always maintain the same number of tags on the left and right sides.

 <div class="container"> <input style="visibility: hidden" type="button" value="0"> <input style="visibility: hidden" type="button" value="0"> <input style="visibility: hidden" type="button" value="0"> <input type="text" size="5" maxlength="5" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> </div> 

Answer 5

Instead of specifying the width in%, you can use CSS calc to split the full width into 3 parts:

 [50% - 25px][50 px][50% - 25px] 

Then align the left side to the right, align the right side to the left, and you're done. When using SASS or LESS you need to specify the width of the central part.

 .container { width: 100%; white-space: nowrap; overflow: hidden; } .container > * { display: inline-block; } .container .left { width: calc(50% - 25px); text-align: right; } .container > input { width: 50px; margin: 0px; text-align: center; } .container .right { width: calc(50% - 25px); text-align: left; } 

 <div class="container"> <div class="left"> <input type="button" value="48" /> <input type="button" value="49" /> </div> <input type="text" maxlength="5" value="50" /> <div class="right"> <input type="button" value="51" /> <input type="button" value="52" /> <input type="button" value="53" /> </div> </div>