CODEWITHSUNDEEP
htmlcss
Bhavik Joshi
Bhavik Joshi

Reputation: 2677

How can we centre the div in a div with buttons to its left and right?

In my code I am trying to put the arrow buttons to the extreme left and right of the div and the mid div must be in the middle of the div I have seen manny question on this but not getting the proper answer can Anybody help me what exactly the problem is?.

what I want is the mid div can of any size so it is containing the 5 buttons but it may contain more or less that that so how to centre that div so this can be achievable.

#page-nav{
        width:400px;
        border:1px solid;
        height:20px;
}
    
#right{
        float:right;
}
#mid{
        margin: 0 auto;
        width:auto;
}
<div id='page-nav'>
          
  <button id=left></button>
        
  <div id="mid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    
  </div>
    
  <button id="right"></button>
</div>

Upvotes: 11

Views: 2377

Answers (5)

Flo
Flo

Reputation: 359

Here is how I like to stretch things using text-align: justify; by using a span at 100% width

The con using this method is the space on the bottom.

 <div id='page-nav'>

            <button id=left><</button>



 <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>

        <button id="right">></button>

     <span class="stretch"> </span>

</div>

CSS

 #page-nav{
        width:400px;
        border:1px solid;
        text-align: justify;
    }
    .stretch {
        width:100%;
        height:1em;
        display:inline-block;
    }

Jsfiddle

Upvotes: 2

ShahiM
ShahiM

Reputation: 3268

Use absolute position for the arrows and display:table for the buttons :

#page-nav {
width:400px;
border:1px solid;
height:30px;
position: relative;
}
#left {
position:absolute;
left:0;
height:25px;

/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#right {
position:absolute;
right:0;
height:25px;

/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#mid {
margin: 0 auto;
width:auto;
display:table;
}

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Set display:table to the parent div and display: table-cell with text-align:center to the inner div and the left and right buttons

UPDATE

It would be better to wrap the left and right buttons in to a div:

#page-nav{
    display: table;
    width:400px;
    border:1px solid;
    height:20px;
}
#left { 
  display:table-cell }
#right{
  display:table-cell;
  text-align:right;
}
#mid{
  display:table-cell;
  text-align: center;
}
button {
  margin-top: 0;
  margin-bottom: 0;
}
<div id='page-nav'>
   <div id="left">
     <button id="leftBtn">L</button>
   </div>
   <div id="mid">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <div id="right">
      <button id="rightBtn">R</button>
    </div>
</div>

Upvotes: 4

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

use

CSS

#page-nav {
    width:400px;
    border:1px solid;
    height:25px;
    text-align:center;
}
#right {
    float:right;
}
#mid {
    display:inline-block;
}
#left {
    float:left;
}

FIDDLE DEMO

Upvotes: 4

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You can't use < in your HTML... the browser will see it as an opening tag. Use special characters instead &lt; and &gt;

<div id='page-nav'>
    <button id="left">&lt;</button>
    <div id="mid">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <button id="right">&gt;</button>
</div>

Then, to your question. Display the #mid div as an inline-block, and add text-align to #page-nav. Then float both the left and right arrow to the sides.

#page-nav {
    width:400px;
    border:1px solid;
    /*height:20px;*/
    text-align: center;
}
#left {
    float: left;
}
#right {
    float:right;
}
#mid {
    display: inline-block;
}

Note that I removed the height of #page-nav so the buttons wrap nice in it.

JSFiddle

Upvotes: 5

Related Questions