Czy można wyśrodkować obraz tła w elemencie DIV? Próbowałem prawie wszystkiego - ale bez sukcesu:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
czy to możliwe?
background-size: cover;
Jeśli chcesz, aby cały obraz był wyświetlany bez obcięcia lub rozciągnięcia żadnej części obrazu, którego chcesz użyćbackground-size: contain;
próbować
background-position:center;
EDYTUJ: ponieważ to pytanie ma wiele wyświetleń, warto dodać dodatkowe informacje:
text-align: center
nie będzie działać, ponieważ obraz tła nie jest częścią dokumentu i dlatego nie jest częścią przepływu.background-position:center
jest skrótembackground-position: center center
; (background-position: horizontal vertical
);źródło
background-position:center;
Użyj pozycji tła:
źródło
Aby wyśrodkować lub ustawić obraz tła, użyj
background-position
właściwości. Właściwość background-position ustawia początkową pozycję obrazu tła ztop
i poleft
bokach elementu. Składnia CSS tobackground-position : xvalue yvalue;
.Obsługiwane wartości „xvalue” i „yvalue” to jednostki długości, takie jak
px
wartości procentowe i nazwy kierunków, takie jak lewo, prawo itd.„Wartość x” jest poziomą pozycją tła i zaczyna się od góry elementu. Oznacza to, że jeśli
50px
go użyjesz , będzie on oddalony o „50 pikseli” od górnej krawędzi elementów. A „yvalue” to pozycja pionowa, która ma ten sam warunek.Więc jeśli użyjesz
background-position: center;
twojego tła, obraz zostanie wyśrodkowany.Ale zawsze używam tego kodu:
Wiem, że to takie zagmatwane, ale oznacza:
Wiem też, że
background-size
jest to nowa właściwość, aw skompresowanym kodzie to, co jest,/cover
ale te kody oznaczająfill
rozmiar tła i pozycjonowanie w tle pulpitu Windows.Można zobaczyć więcej szczegółów na temat
background-position
w tutaj orazbackground-size
w tutaj .źródło
Jeśli obrazem tła jest arkusz sprite'ów wyrównany pionowo, możesz wyśrodkować każdy duszek w poziomie w następujący sposób:
Jeśli obrazem tła jest arkusz sprite'ów wyrównany poziomo, możesz wyśrodkować każdego duszka w pionie w następujący sposób:
Jeśli Twój arkusz sprite jest zwarty lub nie próbujesz wyśrodkować obrazu tła w jednym z wyżej wymienionych scenariuszy, te rozwiązania nie mają zastosowania.
źródło
To działa dla mnie:
źródło
To działa dla mnie:
źródło
margin: 0 auto;
gdzieauto
sprawia, że jest wyśrodkowany poziomo w div Dziękuję Ci!To działa dla mnie:
źródło
To działa dla mnie do wyrównywania obrazu do środka div.
źródło