679

Özniteliğe positionayarlanmış bir öğeyi ortalamakta sorun yaşıyorum absolute. Görüntülerin neden ortalanmadığını bilen var mı?

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>

Snippet'i genişlet

— user1098278
kaynak

3

ul # slayt gösterisine sabit bir genişlik

— vermelisiniz

1194

Kullanabileceğiniz bir genişlik ayarladıysanız:

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

— baaroz
kaynak

21

Bu diğerlerinden çok daha temiz bir cevap! Herhangi bir uyarı var mı?

— sbichenko

8

En akıllı cevap. Daha yeni kontrol ettim ve tüm tarayıcılarda çalışıyor. IE8 üzerinde çalışmıyor ancak IE üzerinde çalışıyor> = 9

— Roger

13

IE'de test ettiğinizden emin olun, öğenin

— IE9'da

33

Ben şahsen "margin: 0 auto; left: 0; right: 0;" sözdizimini tercih ederim.

— Hector Ordonez

58

Bir genişlik ayarlanmadığı sürece bu oldukça işe yaramaz. Eğer metin hizalama: ana öğenin üzerinde merkez varsa ve mutlak konumlandırılmış öğede bir arka planınız yoksa işe yarayabilir. TranslateX (-50%) yanıtı doğru.

— Codemonkey

585

Konumlandırılmış ¹ elemanın width/ öğesini bilmeden , yine de aşağıdaki gibi hizalamak mümkündür:height

BURAYA ÖRNEK

.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%) */
}

IE9 ve üzeri sürümlerde CSS Dönüşümünün desteklendiğini belirtmek gerekir . (Kısalık için satıcı ön ekleri atlandı)

açıklama

Ekleme top/ leftbir 50%ana ortasında, ve hareket elemanının üst / sol kenar kenara translate()sahip fonksiyonu (negatif) değerinin -50%büyüklüğü yarısına kadar hareket elemanı. Bu nedenle eleman ortada konumlandırılacaktır.

Bunun nedeni, top/ leftözelliklerindeki yüzde değerinin , üst öğenin (içeren bir blok oluşturan) yüksekliğine / genişliğine göreli olmasıdır.

Dönüştürme işlevindeki yüzde değeri , öğenin kendisinin genişliğine / yüksekliğine göreli olsa da (Aslında sınırlama kutusunun boyutunu ifade eder ) .translate()

Tek yönlü hizalama için translateX(-50%)veya translateY(-50%)yerine gidin .

^{Bir ile 1. Bir eleman positiondışında static. Yani relative, absolute, fixeddeğerler.}

— Haşimi Qolami
kaynak

65

Bu en iyi cevap olmalı !!

— Chris Pine

3

Fantastik! En iyisi!

— Bhargav Ponnapalli

4

Ben her yerde buna bir cevap ve iyi bir açıklama aradım. Bu en iyi cevap ve harika bir açıklama da var! Teşekkürler.

— Mike

5

Yatay merkezleme: position: absolute; left: 50%; transform: translateX(-50%);dikey merkezleme: position: absolute; top: 50%; transform: translateY(-50%);.

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

1

Hemen şimdi bu translateözelliği buldum , öğeyi kendi boyutuna göre çevirin , Ebeveyninin büyüklüğü ne olursa olsun.

— Farzin Kanzi

185

absoluteKonumlandırılan bir şeyi ortalamak CSS'de oldukça kıvrımlıdır.

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

}

margin-leftMerkezlemeye çalıştığınız öğenin genişliğinin yarısını (negatif) olarak değiştirin .

— bookcasey
kaynak

5

Bunu test ederken, görüntüler farklı boyutlarda olduğunda işe yaramaz ve hala birbiri üzerine

— yığılırlar

3

Çok hack-ish (neredeyse her zaman css ile çıkıyor). Ama harika! :-)

— Dr.Kameleon

1

Diğer bazı cevapların akıllılığı beni cezbediyordu, ama sadece bu benim için güvenilirdi.

— Chris Schiffhauer

Ryan gibi aynı sorunu vardı, bu yüzden "baaroz" tarafından önerilen ikinci cevap denedim ve benim için çalıştı !!! ve farklı çözünürlükleri de destekliyor, çünkü ana DIV'm PX

— UID

Bu aslında ortalanmış değil. Bu daha sağda konumlandırılmış

— Artsicle

82

Dikey ve yatay hizalanmış merkez

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

Not: Elemanların ayarlanacak genişlik ve yüksekliğe sahip olması gerekir

— Sebin Simon
kaynak

1

Bunun neden daha fazla oy alamadığını bilmiyorum. Anlayabildiğim kadarıyla mobil tarayıcılar da dahil olmak üzere tüm tarayıcılarda çalışır. Destek açısından daha güvenilir dikişler. Basit, kolay ve temiz ...

— David Martins

1

Bu daha iyi bir cevap. Sadece bir div yapmak gerekir ve soldan çağırmaktan daha fazla kullanım durumu vardır:% 50 ;, üst:% 50; 69+ oy ile çözüm gibi

— Ian S

Şimdiye kadarki en iyi cevap, buraya gelen herhangi biri kontrol etmeli!

— Abdo Adel

3

Elemanın da heightçalışması için bir sete ihtiyacı vardır .

— alexbooots

55

Basit bir CSS hilesi ekleyin:

width: 100%;
text-align: center;

Bu hem görüntüler hem de metin üzerinde çalışır.

— cutez7boyz
kaynak

48

Mutlak bir öğeyi ortalamak istiyorsanız

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

Bir kabın soldan sağa ortalanmasını ancak yukarıdan aşağıya ortalanmasını istemiyorsanız

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

Bir kabın soldan sağa bakılmaksızın yukarıdan aşağıya ortalanmasını istiyorsanız

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

15 Aralık 2015 itibarıyla güncelleme

Birkaç ay önce yeni bir numara daha öğrendim. Göreli bir üst öğeye sahip olduğunuzu varsayarsak.

İşte mutlak unsurunuz.

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

Bununla, eski çözümümden daha iyi bir cevap olduğunu düşünüyorum. Genişlik ve yükseklik belirtmeniz gerekmediğinden. Bu, elemanın içeriğini uyarlar.

— Wesley Brian Lachenal
kaynak

36

Bir "pozisyon: mutlak" elemanı ortalamak için.

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

— Vadamadafaka
kaynak

32

Bu benim için çalıştı:

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

— Deplake
kaynak

27

a konumunu konumlandırmak için sola ayarlamanız gereken mutlak nitelik:% 50 ve sol kenar boşluğu: div genişliğinin% -50'si.

<!-- 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>

dikey merkez mutlak için sadece sol üst ile değil aynı şeyi tomurcuk yapmak gerekir. (NOT: html ve gövdenin minimum yüksekliği% 100 olmalıdır;)

<!-- 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>

ve her ikisi için de birleştirilebilir

   <!-- 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
kaynak

16

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

demoya bakınız: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; position: absoluteeklerken bir elemanla çalışırleft: 0; right: 0;

— Muhammed Dayeh
kaynak

2

Lütfen bu kodun neden çalıştığına bir tür yorum veya gerekçe sağlayın. Kod yanıtlarının kendileri kaçınılmaz olarak silinmek üzere işaretlenir.

— rayryeng

14

Daha basit, en iyi:

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

Daha sonra img etiketinizi aşağıdaki gibi bir spor etiketine yerleştirmeniz gerekir: relative özellik, aşağıdaki gibi:

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

— Stéphane de Luca
kaynak

8

muhtemelen en kısa

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

— Cris
kaynak

1

Bu oldukça harika ama sadece dikey ve yatay olarak ortalamak için sadece marj otomatik yapmamız gerekiyor

— Santosh

7

Öğenin genişliğini bilmiyorsanız bu kodu kullanabilirsiniz:

<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>

Kemanda demo: http://jsfiddle.net/wrh7a21r/

Kaynak: https://stackoverflow.com/a/1777282/1136132

— joseantgv
kaynak

@ NabiK.AZ öğenin genişliğini bilmiyorsanız bu örnek yararlıdır. Örneğinizde div öğesine bir genişlik ayarladınız.

— joseantgv

7

Veya artık mutlak postiyonlu esnek kutu kullanabilirsiniz:

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

.child {
    position: absolute;
}

— Sebastian Thomas
kaynak

bu çok küçümsüyor.

— Siege21x

5

Ne başarmak istediğiniz emin değilim, ama bu durumda sadece ekleyerek width: 100%;sizin için ul#slideshow lihile olacaktır.

açıklama

imgEtiketler hat içi blok elemanlarıdır. Bu, metin gibi satır içi olarak aktıklarını, ancak blok öğelerine benzer genişlik ve yüksekliğe sahip oldukları anlamına gelir. Css'nizde ve text-align: center;kurallarına uygulanan iki kural vardır <body>.#slideshowWrapper ( btw olan) bu, tüm satır içi ve satır içi blok alt öğelerinin en yakın blok öğelerinde ortalanmasını sağlar, kodunuzda bunlar lietiketlerdir. Tüm blok elemanlarının varsayılan width: 100%statik statik akış ( position: static;) olması gerekir. Sorun şu ki, lietiketlerin olduğunu söylediğinizde position: absolute;, bunları normal statik akıştan çıkarırsınız ve bu, boyutlarını sadece iç içeriklerine uyacak şekilde küçültmelerine neden olur, başka bir deyişle width: 100%mülklerini "kaybederler" .

— Konstantine Kalbazov
kaynak

5

left: calc(50% - Wpx/2);W öğesinin nerede olduğunu kullanmak elemanın genişliği benim için işe yarar.

— Julix
kaynak

W'yu nasıl belirliyorsunuz?

— Purplejacket

"Bir resim" dedi - ideal olarak web için resim yaparken, gereksiz ağırlığı önlemek için (büyük bir resim yaparsanız) resmi kullanacağınız boyutta (yeniden boyutlandırmak yerine) yapmanız gerekir. küçük) veya bulanıklık (küçük bir resmi büyük yaparsanız). - jQuery kullanıyorsanız ve sonra da dinamik olarak stil kullanıyorsanız, "imageElement.naturalHeight" ve "imageElement.naturalWidth" kullanabilirsiniz. Adil olmak gerekirse, diğer cevapların çoğu, tekniklerinin çalışması için görüntünün genişliğini bilmenizi gerektirir.

— Temmuz

W'yu nasıl alacağınızdan gerçekten emin değilseniz, Chrome'da öğelerin üzerine gelip ne kadar geniş olduğunu görmek için CTRL + Shift + i (geliştirici araçları), ardından CTRL + Shift + C (inceleme modu) kullanabilirsiniz. Ayrıca ne kadar geniş olmasını istediğinize karar verebilir ve css'nize "width: Wpx" ekleyebilirsiniz.

— Temmuz

4

Liste öğeleriniz ortalanmadığından resimleriniz ortalanmadı; yalnızca metinleri ortalanır. Tüm listeyi ortalayarak veya listedeki resimleri ortalayarak istediğiniz konumlandırmayı sağlayabilirsiniz.

Kodunuzun gözden geçirilmiş bir sürümünü aşağıda bulabilirsiniz. Revizyonumda hem listeyi hem de içindeki resimleri ortalıyorum.

Gerçek şu ki, bir can not mutlak bir pozisyon seti sahip bir öğe ortalamak.

Ancak bu davranış taklit edilebilir!

Not: Bu talimatlar, yalnızca img ile değil, herhangi bir DOM blok öğesiyle çalışacaktır.

Resminizi bir div veya başka bir etiketle (sizin durumunuzda bir li) çevreleyin.
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Not: Bu öğelere verilen adlar özel değildir.

Div'a mutlak konumlandırma ve resminizi ortalayarak vermek için css veya scss'nizi değiştirin.

.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;
}

İşte buyur! IMG'niz ortalanmalıdır!

Senin kodun:

Şunu deneyin:

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>

Snippet'i genişlet

Umarım bu yardımcı olmuştur. İyi şanslar!

— D3RPZ1LLA
kaynak

3

Göreceli bir nesnenin içindeki mutlak bir nesne üst nesnesine göredir, buradaki sorun kap için statik bir genişliğe ihtiyacınız #slideshowWrapperolması ve çözümün geri kalanının diğer kullanıcıların söylediği gibidir

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
kaynak

Birbirini istifleyen iki görüntü olarak keman.

— Ryan Gibbons

3

İşte “konum: mutlak” orta eleman için kolay ve en iyi çözüm

 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>

Snippet'i genişlet

— SantoshK
kaynak

2

Bu şekilde deneyebilirsiniz:

* { 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>

Snippet'i genişlet

— Chirag Dave
kaynak

1

Mutlak konum, onu akıştan çıkarır ve 0x0 değerine ebeveyne yerleştirir (mutlak veya göreceli bir konuma sahip olmak için son blok elemanı).

Tam olarak neyi başarmaya çalıştığınızdan emin değilim, li'yi bir position:relative ve bu onları ortalar. Mevcut CSS'niz verildiğinde

Check out http://jsfiddle.net/rtgibbons/ejRTU/ onunla play

— Ryan Gibbons
kaynak

: / sonunda seninkiyle hemen hemen aynı çözüm ... <Yukarı oy

— 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;
}

Negatif üst, sağ, alt, sol değerleri kullanarak yukarıda listelenen merkezleme yöntemini nerede gördüğümü hatırlamıyorum. Benim için, bu teori çoğu durumda en iyisidir.

Kombinasyonu yukarıdan kullandığımda, görüntü aşağıdaki ayarlarla arka plan görüntüsü gibi davranır:

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

İlk örnekle ilgili daha fazla ayrıntıyı burada bulabilirsiniz:
Bir div'in CSS ile en boy oranını koruyun

— Marian07
kaynak

0

Olmakta olan iki çözüm var; kenar boşlukları kullanılarak ortalanmış ve konum kullanılarak ortalanmış. Her ikisi de iyi çalışır, ancak bir öğeyi bu ortalanmış öğeye göre mutlak konumlandırmak istiyorsanız, mutlak konum yöntemini kullanmanız gerekir, çünkü ikinci öğenin mutlak konumu, konumlandırılan ilk üst öğeyi varsayılan olarak kullanır. Şöyle ki:

<!-- 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>

Bu gönderiyi okuyana kadar, margin: 0 auto tekniğini kullanarak, içeriğimin solunda bir menü oluşturmak için sağa doğru dengelemek için aynı genişlikte bir sütun oluşturmak zorunda kaldım. Güzel değil. Teşekkürler!

— Deane Nettles
kaynak

0

margin-left: x%;X öğesinin genişliğinin yarısı olduğu yerde kullanın .

— Bibaswann Bandyopadhyay
kaynak

-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>

Snippet'i genişlet

— antelove
kaynak

1

Bu cevabın sadece kodu var. Doğru olsa da, kodun OP'nin sorusuna neden yanıt verdiğine dair eşlik eden bir açıklaması olmalıdır. Kod, Stack Exchnge'de "kendini açıklayan" değildir.

— JBH

Bir "konum: mutlak" öğeyi merkezleme

açıklama

açıklama

Ancak bu davranış taklit edilebilir!

İşte buyur! IMG'niz ortalanmalıdır!

Senin kodun: