Wie können wir das div in einem div mit Knöpfen links und rechts zentrieren?

Question

In meinem Code versuche ich, die Pfeiltasten ganz links und rechts von der div und die mid div muss in der Mitte der div Ich habe gesehen, Manny Frage zu diesem aber nicht die richtige Antwort kann jemand helfen mir was genau das Problem ist ?.

was ich will, ist die mid div kann jede Größe, so dass es die 5 Tasten enthält, aber es kann mehr oder weniger, dass so, wie dieses div so zentrieren, so dass dies erreichbar sein kann.

#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> 
 

 

 

Answer 1

Sie nicht < in Ihrem HTML verwenden können ... wird der Browser sehen es als ein öffnendes Tag Verwenden Sie Sonderzeichen anstelle < und >

<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> 

Dann auf Ihre Frage. Zeigen Sie das #mid Div als einen Inline-Block an, und fügen Sie text-align zu #page-nav hinzu. Dann schweben Sie den linken und rechten Pfeil zu den Seiten.

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

Bitte beachte, dass ich die Höhe von #page-nav entfernt, so dass die Tasten in ihm schön wickeln.

JSFiddle

Answer 2

Set display:table an die Mutter div und display: table-cell mit text-align:center an der inneren div und die linken und rechten Tasten

UPDATE

Es wäre besser, zu wickeln die linken und rechten Tasten in einem 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>

Answer 3

Verwendung

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

Answer 4

Hier ist, wie ich die Dinge wie text-align: justify; unter Verwendung eines auf der Unterseite der Raum mit dieser Methode span at 100% width

Die con mit strecken.

<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

Answer 5

Verwenden absolute Position für die Pfeile und display:table für die Tasten:

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