Trucchi di centraggio CSS [chiuso]

StackOverflow https://stackoverflow.com/questions/148251

Domanda

La mia equazione preferita per centrare un elemento xhtml usando solo CSS è la seguente: 

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

C'è anche il margine più semplice: il metodo automatico nei browser che lo supportano. Qualcun altro ha modi complicati per forzare la visualizzazione dei contenuti centrata nel suo contenitore? (punti bonus per il centraggio verticale)

modifica - oops, ho dimenticato la parte "negativa" di una nella margine sinistra. fisso.

È stato utile?

Soluzione

Stick con margine: 0 auto; per allineamento orizzontale; Se è necessario anche un allineamento verticale, utilizzare position: absolute; in alto: 50%; margine superiore: - (larghezza / 2) px; Tuttavia, se il contenitore ha una larghezza maggiore rispetto allo schermo, una parte di esso cadrà dallo schermo sul lato sinistro utilizzando il metodo Posizione: assoluto.

Altri suggerimenti

div #centered{
 margin: 0 auto;
}

sembra essere il più affidabile dalla mia esperienza.

Beh, sembra un enorme inganno, devo dire. Tendo a impostare il contenitore su text-align: center; per i browser precedenti, margin: auto; per i browser moderni e lasciarlo così. Quindi reimposta text-align nell'elemento (se contiene testo).

Certo, alcune cose devono essere impostate come blocco e le larghezze devono essere impostate ... Ma cosa diavolo stai cercando di stile che ha bisogno di che tanto hacking in giro? 

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Margine: funziona automaticamente in tutti i browser purché si assicuri che IE sia in modalità standard.

È più esigente di altri e richiede che il tuo doctype sia il primo nel tuo documento, il che significa che non c'è spazio bianco (spazio, schede o avanzamenti di riga) prima di esso.

Se lo fai, margin: auto è la strada da percorrere! :)

solo una nota che il margine: auto; Il metodo funziona solo se il browser può calcolare la larghezza dell'elemento da centrare e la larghezza del contenitore padre. in molti casi impostando larghezza: auto; funziona, ma in alcuni no.

Questo è un pratico segnalibro per i trucchi CSS

http://css-discuss.incutio.com/

Contiene lotti of centraggio anche trucchi.

Il posizionamento assoluto con approccio al 50% ha il grave effetto collaterale che se la finestra del browser è più stretta dell'elemento, parte del contenuto apparirà al di fuori del lato sinistro del browser - senza alcun modo per scorrere fino a esso.

Rispetta i margini automatici: sono molto più affidabili.

Se stai lavorando in modalità Standard (che dovresti essere), allora sono supportati in tutti i browser che ti interesseranno.

Puoi usare l'hack di allineamento del testo se hai davvero bisogno di supportare Internet Explorer 5.5 e precedenti. 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Funziona bene con tutti i soliti browser. Come già menzionato margin: 0 auto; non funzionerà in tutte le versioni semi-attuali di IE.

Prova questo; non so se funziona in IE, funziona bene in Fx però. Centra un blocco DIV sulla pagina usando solo CSS (nessun JavaScript), nessun margine-auto e il testo all'interno del blocco DIV è ancora allineato a sinistra. Sto solo cercando di scoprire se anche il centraggio verticale potrebbe funzionare in quel modo, ma finora senza successo. 

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top