1. casa
  2. Domanda e risposta
  3. Centratura di un blocco in linea DIV

Centratura di un blocco in linea DIV

2012-04-12 25 views
5

Qualcuno sa come centrare l'allineamento di un DIV che ha il display impostato su blocco in linea?Centratura di un blocco in linea DIV

Non riesco a impostare il display in modo che blocchi perché ho un'immagine di sfondo che deve essere ripetuta e che deve essere espansa in base al contenuto. Si trova all'interno di un div genitore, in cui è più grande quando si tratta di larghezza.

Quindi tutto sommato. Qualcuno ha una correzione per centrare allineare un div con il display impostato su inline-block?

E no, allineamento del testo: centro; non funziona, né margine: 0 auto;

jsFiddle: http://jsfiddle.net/HkvzM/

Grazie!

fonte

2012-04-12 Aaron Brewer

+0

"Non riesco a impostare la visualizzazione per bloccare perché ho un'immagine di sfondo che deve essere ripetuto, e ha bisogno di espandersi in base al contenuto" Entrambi sono possibili per elementi di blocco. Mostraci un esempio di ciò che stai cercando di fare. – ceejayoz

+0

@ceejayoz: Ho aggiornato la mia domanda con il collegamento a jsFiddle. Grazie! –

risposta

13

Prova ad usare questo:

margin: 0 auto;

O text-align: center; sul genitore <div> ...

fonte

2012-04-12 21:41:31

+0

Div genitore non può avere nessuno di quelli che vedono dato che è un elemento flottato e gli elementi al suo interno non possono essere allineati via centro. –

+3

in realtà, float non impedisce che ciò accada. text-align: center works here: http://jsfiddle.net/HkvzM/3/ è in un div floated. il problema è che devi dare una larghezza al genitore. Penso che abbiamo bisogno di maggiori informazioni sulla struttura principale per capire di cosa hai bisogno. Margine – Ege

+2

: 0 auto; sul div inline block non sembra funzionare. – Sir

1

Non è possibile centrare un elemento con

display:inline

Potrebbe essere necessario trovare un lavoro in giro usando jQuery o JavaScript. Puoi fare un centraggio approssimativo con CSS che funzionerà se il testo non cambia molto di lunghezza. Qualcosa di simile Demo

<div id="out"> 
    <a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a> 
</div>​​​ 

#out{ 
padding:0 50px; 
}

fonte

2012-04-13 01:25:23

2

Hi si può dare genitore centro text-align non bambino come come questo

Css

div{ 
    text-align: center; 

} 

.dl{ 
    color: #fff; 
    margin: 0 auto; 
    background: #000; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: bold; 
    line-height:35px; 
    display:inline-block;  
}

HTML

<div> 
<a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>  
</div>

Demo live here http://jsfiddle.net/rohitazad/HkvzM/15/

fonte

2012-04-13 05:26:38

Problemi correlati

 Problemi correlati