2012-04-12 18 views
5

Czy ktoś wie, jak wyśrodkować DIV, który ma ustawiony zestaw do wbudowanego bloku?Centrowanie bloku wbudowanego DIV

Nie mogę ustawić wyświetlania na blok, ponieważ mam obraz tła, który musi zostać powtórzony i musi zostać rozwinięty na podstawie zawartości. Znajduje się wewnątrz rodzica div, w którym jest większy, jeśli chodzi o szerokość.

W sumie. Czy ktoś ma poprawkę, aby wyśrodkować div z zestawem wyświetlania do bloku inline?

I nie, wyrównanie tekstu: centrum; nie działa, ani nie ma marginesu: 0 auto;

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

Dziękujemy!

+0

„Nie mogę ustawić wyświetlanie blokowania bo mam obraz tła, który musi zostać powtórzony, a to wymaga, aby rozwinąć w oparciu o treści” Oba są możliwe dla elementów blokowych. Pokaż nam przykład tego, co próbujesz zrobić. – ceejayoz

+0

@ceejayoz: Zaktualizowałem swoje pytanie z linkiem do jsFiddle. Dziękuję Ci! –

Odpowiedz

13

Spróbuj użyć tego:

margin: 0 auto; 

Albo text-align: center; na rodzica <div> ...

+0

Div DivD rodzica nie może mieć żadnego z widzących jako elementu pływającego, a elementy wewnątrz niego nie mogą być wyrównane przez środek. –

+3

w rzeczywistości float nie zapobiega takiemu zdarzeniu. text-align: center działa tutaj: http://jsfiddle.net/HkvzM/3/ jest w pływającym div. problemem jest to, że musisz podać szerokość rodzicowi. Myślę, że potrzebujemy więcej informacji na temat struktury nadrzędnej, aby dowiedzieć się, czego potrzebujesz. – Ege

+2

margin: 0 auto; na wbudowanym bloku div nie działa. – Sir

1

Nie można wyśrodkować element z

display:inline 

Być może trzeba znaleźć pracę wokół za pomocą jQuery lub JavaScript. Możesz wykonać przybliżone centrowanie za pomocą CSS, które zadziała, jeśli tekst nie zmieni się tak długo. Coś takiego Demo

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

#out{ 
padding:0 50px; 
} 
2

Hi można dać dominującego centrum text-align nie dziecko, jak się ten

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 na żywo tutaj http://jsfiddle.net/rohitazad/HkvzM/15/

Powiązane problemy