CSS: How to align elements around a centered element?


Tags: html,css,css3,alignment

Problem :

I am trying to create a simple page navigation consisting of three parts:

  1. A few previous page numbers (if any)
  2. The current page number (this must be centered)
  3. A few upcoming page numbers (if any)

The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.

This JSFiddle illustrates my two attempts at solving 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 manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.

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%;
}

Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?



Solution :

You should use flex and float properties together, checkout 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>


    CSS Howto..

    CSS: How to shadow a field like this? [closed]

    How to add contact details next to responsive Google Map

    How to make a sudoku grid using HTML and CSS?

    How to Get CSS/JavaScript Pop-Up to Transition In

    How can I use CSS to add a blank column between paired column groupings?

    How to make Superfish menu vertical in first level but horizontal in second level?

    How can I align two icons on my webpage next to each other?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    how to make this (table) using divs and css

    How can I resize images that are loaded onto a page?

    How to Javascript to load a css file only for one specific page?

    How to apply css class for selected element in jquery or javascript?

    How to create folder style in CSS

    How to simulate multiple
    tag with CSS

    How to move text list items to align with an image list item

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to arrange elements vertically?

    how to change browsers default scrollbar using css or jquery

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to enable HTML content on top of Flash content without the frame rate dropping?

    How do I float a div to the right of a title div without affecting the content of the title?

    How classes work in a CSS file? [closed]

    how to get the value of css style using jquery

    How to make CSS fade out but the HTML to collapse

    How to use this CSS font technique?

    How can I setup a border inside the div

    Customizing ebay store HTML and CSS code (How to?)

    How to increase an width:auto DIV's width by X pixels using pure CSS