678

Mam problem z centrowaniem elementu, dla którego positionustawiono atrybut absolute. Czy ktoś wie, dlaczego obrazy nie są wyśrodkowane?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Rozwiń fragment kodu

— użytkownik1098278
źródło

3

musisz nadać

— pokazowi

1193

Jeśli ustawiłeś szerokość, możesz użyć:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
źródło

21

To odpowiedź jest znacznie czystsza niż reszta! Czy są jakieś zastrzeżenia?

— sbichenko,

8

Najmądrzejsza odpowiedź. Właśnie to sprawdziłem i działa we wszystkich przeglądarkach. Nie działa na IE8, ale działa na IE> = 9

— Roger

13

Pamiętaj, aby przetestować w IE, ta sztuczka nie działa, jeśli element ma ustawioną „maksymalną szerokość” w IE9

— aphax

33

Osobiście wolę składnię „margin: 0 auto; left: 0; right: 0;”

— Hector Ordonez

58

To po prostu nie działa, chyba że zostanie ustawiona szerokość. Może WYŚWIETLIĆ działanie, jeśli masz wyrównywanie tekstu: wyśrodkuj na obiekcie nadrzędnym i nie masz tła na elemencie pozycjonowanym bezwzględnie, ale umieść na nim tło, a zobaczysz, że zajmuje całą szerokość. Odpowiedź translateX (-50%) jest poprawna.

— Codemonkey

585

Nie znając width/ heightpozycjonowanego ¹ elementu, nadal można wyrównać go w następujący sposób:

PRZYKŁAD TUTAJ

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Warto zauważyć, że CSS Transform jest obsługiwany w IE9 i nowszych wersjach . (Prefiksy dostawcy pominięto ze względu na zwięzłość)

Wyjaśnienie

Dodanie top/ leftof 50%przenosi górną / lewą krawędź marginesu elementu na środek rodzica i translate()działa z (ujemną) wartością-50% przesuwa element o połowę jego wielkości. Dlatego element zostanie umieszczony na środku.

Jest tak, ponieważ wartość procentowa na top/left właściwości jest względna w stosunku do wysokości / szerokości elementu macierzystego (który tworzy blok zawierający).

Podczas gdy wartość procentowa funkcji przekształcenia jest zależna od szerokości / wysokości samego elementu (w rzeczywistości odnosi się do wielkości ramki granicznej )translate() .

Aby uzyskać wyrównanie jednokierunkowe, użyj translateX(-50%)lub translateY(-50%)zamiast.

^{1. Element z positioninnym niż static. Czyli relative, absolute, fixedwartości.}

— Hashem Qolami
źródło

65

To powinna być najlepsza odpowiedź !!

— Chris Pine

3

Fantastyczny! Najlepsze z wszystkiego!

— Bhargav Ponnapalli

4

Wszędzie szukałem odpowiedzi na to pytanie i dobrego wyjaśnienia. To najlepsza odpowiedź i świetne wyjaśnienie! Dzięki.

— Mike

5

Centrowanie w poziomie: position: absolute; left: 50%; transform: translateX(-50%);pionowe centrowanie: position: absolute; top: 50%; transform: translateY(-50%);.

— Константин Ван

1

Właśnie znalazłem tę translatewłaściwość, przetłumacz element według rozmiaru samego siebie , bez względu na rozmiar jego elementu nadrzędnego.

— Farzin Kanzi

185

Centrowanie czegoś, co zostało absoluteustawione, jest raczej skomplikowane w CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Zmień margin-leftna (ujemną) połowę szerokości elementu, który próbujesz wyśrodkować.

— regał na książki
źródło

5

Podczas testowania nie działa, gdy obrazy mają różne rozmiary i nadal układają się jeden na drugim

— Ryan Gibbons

3

Zbyt hack-ish (jak prawie zawsze okazuje się z css). Ale super! :-)

— Dr.Kameleon

1

Kusiło mnie sprytne odpowiedzi, ale tylko ta była dla mnie wiarygodna.

— Chris Schiffhauer,

Miałem ten sam problem co Ryan, więc wypróbowałem drugą odpowiedź zasugerowaną przez „baaroz” i zadziałało dla mnie !!! i obsługuje również różne rozdzielczości, ponieważ mój główny DIV ma szerokość w%, a nie PX

— UID

To nie jest właściwie wyśrodkowane. To jest bardziej ustawione po prawej stronie

— Artykuł

82

Div pionowe i poziome wyrównane centrum

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Uwaga: Elementy powinny mieć szerokość i wysokość do ustawienia

— Sebin Simon
źródło

1

Nie wiem, dlaczego nie ma więcej głosowania. O ile wiem, działa we wszystkich przeglądarkach, w tym także na przeglądarkach mobilnych. Szwy są bardziej niezawodne pod względem wsparcia. To proste, łatwe i czyste ...

— David Martins

1

To lepsza odpowiedź. Wymaga tylko jednego diva i ma więcej przypadków użycia niż wywołanie left: 50% ;, top: 50%; jak rozwiązanie z ponad 69 głosami

— Ian S

najlepsza jak dotąd odpowiedź, każdy, kto tu przyjdzie, powinien to sprawdzić!

— Abdo Adel,

3

Element wymaga również heightzestawu, aby to działało.

— alexbooots,

55

Prosta sztuczka CSS, wystarczy dodać:

width: 100%;
text-align: center;

Działa to zarówno na obrazach, jak i na tekście.

— cutez7boyz
źródło

48

Jeśli chcesz wyśrodkować element absolutny

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Jeśli chcesz, aby pojemnik był wyśrodkowany od lewej do prawej, ale nie od góry do dołu

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Jeśli chcesz, aby pojemnik był wyśrodkowany od góry do dołu, niezależnie od tego, czy jest od lewej do prawej

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Aktualizacja na 15 grudnia 2015 r

Cóż, nauczyłem się tej kolejnej nowej sztuczki kilka miesięcy temu. Zakładając, że masz względny element nadrzędny.

Oto twój absolutny element.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Dzięki temu myślę, że jest to lepsza odpowiedź niż moje stare rozwiązanie. Ponieważ nie musisz określać szerokości ORAZ wysokości. Ten dostosowuje zawartość samego elementu.

— Wesley Brian Lachenal
źródło

36

Aby wyśrodkować element „position: bezwzględny”.

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

— Vadamadafaka
źródło

32

To działało dla mnie:

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
źródło

27

aby wyśrodkować pozycję: atrybut absolutny, musisz ustawić lewy: 50% i margines lewy: -50% szerokości div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

dla absolutnego środka w pionie musisz zrobić to samo, ale nie z lewym tylko u góry. (UWAGA: HTML i treść muszą mieć minimalną wysokość 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

i mogą być łączone dla obu

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

— Rednas
źródło

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

zobacz demo na: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; współpracuje z position: absoluteelementem podczas dodawanialeft: 0; right: 0;

— Mohammad Dayeh
źródło

2

Podaj komentarz lub uzasadnienie, dlaczego ten kod działa. Odpowiedzi na kod same w sobie nieuchronnie zostaną oznaczone do usunięcia.

— rayryeng

14

Prostsze, najlepsze:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Następnie musisz wstawić tag img do tagu o pozycji sportowej: właściwość względna w następujący sposób:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— Stéphane de Luca
źródło

8

prawdopodobnie najkrótszy

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

— Cris
źródło

1

Jest to dość niesamowite, ale aby wyśrodkować w pionie i poziomie, musimy ustawić automatyczne marginesy tylko

— Santosh

7

Jeśli nie znasz szerokości elementu, możesz użyć tego kodu:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Demo na skrzypcach: http://jsfiddle.net/wrh7a21r/

Źródło: https://stackoverflow.com/a/1777282/1136132

— joseantgv
źródło

@ NabiK.AZ ten przykład jest przydatny, jeśli nie znasz szerokości elementu. W twoim przykładzie ustawiłeś szerokość na div.

— joseantgv

7

Lub możesz teraz użyć Flex Box z absolutną pozycją:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

— Sebastian Thomas
źródło

to jest tak niedoceniane.

— Siege21x

5

Nie jestem pewien, co chcesz osiągnąć, ale w tym przypadku wystarczy dodać width: 100%;do swojej ul#slideshow liwoli.

Wyjaśnienie

Te imgznaczniki są wbudowane elementy blokowe. Oznacza to, że przepływają one liniowo jak tekst, ale mają także szerokość i wysokość jak elementy blokowe. W twoim css są dwie text-align: center;reguły zastosowane do <body>i #slideshowWrapper(co jest redundantne przy okazji), co powoduje, że wszystkie elementy potomne w wierszu i w wierszu są wyśrodkowane w swoich najbliższych elementach bloku, w kodzie są to liznaczniki. Wszystkie elementy blokowe mają, width: 100%jeśli są statyczne flow ( position: static;), co jest ustawieniem domyślnym. Problem polega na tym, że gdy mówisz litagom, że są position: absolute;, usuwasz je z normalnego przepływu statycznego, a to powoduje, że kurczą się, by dopasować do wewnętrznej zawartości, innymi słowy, jakby „tracą” swoją width: 100%właściwość.

— Konstantine Kalbazov
źródło

5

Użycie left: calc(50% - Wpx/2);gdzie W jest dla mnie szerokością elementu.

— Julix
źródło

Jak określić W?

— Purplejacket

Powiedział „obraz” - idealnie, robiąc obrazy dla Internetu, należy zrobić obraz w rozmiarze, w którym zamierzasz go użyć (zamiast zmieniać jego rozmiar), aby uniknąć niepotrzebnej wagi (jeśli tworzysz duży obraz mały) lub nieostry (jeśli zrobisz duży obraz duży). - Możesz użyć „imageElement.naturalHeight” i „imageElement.naturalWidth”, jeśli używasz jQuery, a następnie styl również dynamicznie, ale to staje się nieco skomplikowane. Aby być uczciwym, wiele innych odpowiedzi wymaga również znajomości szerokości obrazu, aby ich technika zadziałała.

— Julix,

jeśli jednak nie wiesz, jak uzyskać W, w Chrome możesz użyć CTRL + Shift + i (narzędzia programistyczne), a następnie CTRL + Shift + C (tryb inspekcji), aby najechać myszką na elementy i zobaczyć, jak szerokie są rzeczy. Możesz także zdecydować, jak szeroka ma być, i dodać „width: Wpx” do swojego css.

— Julix

4

Twoje obrazy nie są wyśrodkowane, ponieważ elementy listy nie są wyśrodkowane; tylko ich tekst jest wyśrodkowany. Pozycję, którą chcesz osiągnąć, możesz osiągnąć przez wyśrodkowanie całej listy lub wyśrodkowanie zdjęć na liście.

Zmieniona wersja twojego kodu znajduje się na dole. W mojej wersji wyśrodkowuję zarówno listę, jak i zawarte w niej obrazy.

Prawda jest taka, że nie można wyśrodkować elementu, którego pozycja jest ustawiona na absolutną.

Ale to zachowanie można naśladować!

Uwaga: Te instrukcje będą działać z każdym elementem bloku DOM, nie tylko img.

Otocz swój obraz div lub innym tagiem (w twoim przypadku li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Uwaga: Nazwy nadane tym elementom nie są wyjątkowe.

Zmień css lub scss, aby div div pozycjonowanie absolutne i obraz wyśrodkowany.

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

I masz to! Twoje img powinno być wyśrodkowane!

Twój kod:

Wypróbuj to:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Rozwiń fragment kodu

Mam nadzieję, że to było pomocne. Powodzenia!

— D3RPZ1LLA
źródło

3

Obiekt bezwzględny w obiekcie względnym jest względny względem jego obiektu nadrzędnego, problem polega na tym, że potrzebujesz kontenera o szerokości statycznej #slideshowWrapper, a reszta rozwiązania jest taka, jak mówią inni użytkownicy

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— eveevans
źródło

Twoje skrzypce, gdy dwa obrazy układają się jeden na drugim.

— Ryan Gibbons,

3

Oto proste i najlepsze rozwiązanie dla elementu środkowego z „pozycją: absolutną”

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

Rozwiń fragment kodu

— SantoshK
źródło

2

Możesz spróbować w ten sposób:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

Rozwiń fragment kodu

— Chirag Dave
źródło

1

Pozycja bezwzględna usuwa ją z przepływu i umieszcza ją w pozycji 0x0 nadrzędnej (ostatni element bloku ma pozycję bezwzględną lub względną).

Nie jestem pewien, co dokładnie próbujesz osiągnąć, najlepiej ustawić li na a, position:relativea to je wyśrodkuje. Biorąc pod uwagę twój obecny CSS

Sprawdź http://jsfiddle.net/rtgibbons/ejRTU/, aby z nim zagrać

— Ryan Gibbons
źródło

: / na końcu jest prawie takie samo rozwiązanie jak twoje ... <W górę głosowania

— eveevans

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Nie pamiętam, gdzie widziałem powyższą metodę centrowania, używając ujemnych wartości góra, prawo, dół, lewo. Dla mnie ta technika jest najlepsza w większości sytuacji.

Gdy korzystam z powyższej kombinacji, obraz zachowuje się jak obraz tła z następującymi ustawieniami:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Więcej szczegółów na temat pierwszego przykładu można znaleźć tutaj:
Zachowaj proporcje div z CSS

— Marian07
źródło

0

Wydaje się, że dzieje się tak, że istnieją dwa rozwiązania; wyśrodkowany przy użyciu marginesów i wyśrodkowany przy użyciu pozycji. Oba działają dobrze, ale jeśli chcesz pozycjonować bezwzględnie element względem tego wyśrodkowanego elementu, musisz użyć metody pozycji absolutnej, ponieważ pozycja bezwzględna drugiego elementu jest domyślnie ustawiona na pierwszy nadrzędny element, który jest pozycjonowany. Tak jak:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Dopóki nie przeczytałem tego wpisu, używając techniki automatycznej margines: 0, aby zbudować menu po lewej stronie mojej treści, musiałem zbudować kolumnę o tej samej szerokości po prawej stronie, aby ją wyrównać. Nie ładna Dzięki!

— Deane pokrzywy
źródło

0

Użyj margin-left: x%;gdzie x jest połową szerokości elementu.

— Bibaswann Bandyopadhyay
źródło

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Rozwiń fragment kodu

— antylopa
źródło

1

Ta odpowiedź ma tylko kod. Chociaż może być poprawny, powinien zawierać towarzyszące mu wyjaśnienie, dlaczego kod odpowiada na pytanie OP. Kod nie jest „zrozumiały” na Stack Exchnge.

— JBH

Jak wyśrodkować element „pozycja: absolut”

Wyjaśnienie

Wyjaśnienie

Ale to zachowanie można naśladować!

I masz to! Twoje img powinno być wyśrodkowane!

Twój kod: