Mam element div i chcę, aby był wyśrodkowany w poziomie - chociaż podam, margin:0 auto;
że nie jest wyśrodkowany ...
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
Odpowiedzi:
Musisz ustawić
left: 0
iright: 0
.Określa, jak daleko przesunąć krawędzie marginesów od boków okna.
Źródło: http://www.w3.org/TR/CSS2/visuren.html#position-props
źródło
width
jest koniecznością!margin: auto
, aby działał w naszym przypadkuTo nie działa w IE8, ale może być opcją do rozważenia. Jest to przydatne przede wszystkim, jeśli nie chcesz określać szerokości.
źródło
Chociaż powyższe odpowiedzi są poprawne, ale aby ułatwić początkującym pracę, wystarczy ustawić margines, lewy i prawy. następujący kod zrobi to pod warunkiem, że szerokość jest ustawiona, a pozycja jest bezwzględna:
Próbny:
źródło
Flexbox? Możesz użyć flexbox.
źródło
left: 0; right: 0;
rozszerzony do 100%, co nie było opcją, ponieważ element potomny miał kolor tła, orazleft: 50%; transform: translateY(-50%);
nie działał, ponieważ ograniczało to dziecko do 50% szerokości. Było to jedyne rozwiązanie, które zachowało elastyczne wymiary dziecka (ograniczone tylko do obsługi przeglądarki). Dzięki!źródło
tak łatwe, używaj tylko właściwości margin i left, right:
Możesz zobaczyć więcej w tej wskazówce => Jak ustawić element div na środku w blogu html- Obinb
źródło
Oto link, użyj go, aby ustawić div w środku, jeśli pozycja jest bezwzględna.
HTML:
CSS:
Przykład jsfiddle
źródło
Nie możesz używać
margin:auto;
naposition:absolute;
elementach, po prostu usuń go, jeśli go nie potrzebujesz, jednak jeśli to zrobisz, możesz użyćleft:30%;
((100% -40%) / 2) i zapytań o media dla wartości maksymalnych i minimalnych:źródło