Pulsante Centro CSS

Solito problema CSS centratura, semplicemente non funziona per me, il problema è che non so finito larghezza pxPulsante Centro CSS

Ho un div per tutta la navigazione e quindi ciascun pulsante all'interno, essi non centro più quando c'è più di un pulsante. :(

CSS

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

.nav_button{ 
    height:34px; 
    margin:0 auto; 
    margin-right:10px; 
    float:left; 
}

HTML

<div class="nav"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 

     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 

     </div> 
</div>

Qualsiasi aiuto sarebbe molto apprezzato. Grazie

Risultato

Se la larghezza è sconosciuto, ho trovato un modo un centro di pulsanti, non del tutto felice, ma importa doesnt, funziona: D

Il modo migliore è quello di mettere in una tabella

<table class="nav" align="center"> 
    <tr> 
     <td> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 

     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
     </td> 
    </tr> 
    </table>

fonte

2010-09-01 Stevanicus

113

Mi rendo conto che questa è una domanda molto vecchio, ma mi sono imbattuto attraverso questo problema oggi e ho avuto modo di lavorare con

<div style="text-align:center;"> 
    <button>button1</button> 
    <button>button2</button> 
</div>

Cheers, Mark

fonte

2012-10-15 03:15:55 markbaldy

Ha funzionato come un fascino. Kudos @markbaldy – andy4thehuynh

Il problema è con la seguente riga di CSS sulla .nav_button:

margin: 0 auto;

che avrebbe funzionato solo se si ha un pulsante, è per questo che sono fuori-centrato, quando ci sono più di un nav_button div.

Se si desidera che tutti i pulsanti centrati nido nav_buttons in un altro div:

<div class="nav"> 
    <div class="centerButtons"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
    </div> 
</div>

E lo stile in questo modo:

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

/* Centers the div that nests the nav_buttons */ 
.centerButtons { 
    margin: 0 auto; 
    float: left; 
} 

.nav_button{ 
    height:34px; 
    margin-right:10px; 
    float: left; 
}

fonte

2010-09-01 23:21:58 Espresso

grazie per il tuo post, purtroppo non funziona neanche, ancora tutto a sinistra. – Stevanicus

Sì, l'ho appena capito. È perché il .centerButtons è un elemento di blocco e occupa tutto lo spazio in .nav, rendendo inutilizzabili le proprietà dei margini. Ho provato a risolverlo facendo girare anche .centerButtons, ma senza fortuna. – Espresso

sì, so che è difficile, mi infastidisce perché l'ho già fatto, ma non ricordo come:) ... qualche idea? – Stevanicus

quando tutto il resto fallisce Ho appena

<center> content </center>

So che la sua non è "all'altezza degli standard" più, ma se funziona funziona

fonte

2013-05-21 15:22:02 ott

Questa risposta non aggiunge nulla alle altre risposte. '

' è stato deprecato in HTML4 e non è nemmeno supportato in HTML5, il che significa che probabilmente non funzionerà se si utilizza HTML5. – Magnilex

Lo uso solo se non riesco a far funzionare altro. L'ho usato nelle pagine in cui è presente HTML5 ma preferisco non farlo. Ho superato e sostituito quello che potevo con '

button

' – ott

Un'altra opzione interessante è utilizzare:

width: 40%; 
margin-left: 30%; 
margin-right: 30%

fonte

2016-08-24 08:05:09 Rani

risposta

Problemi correlati