Wie center "position: absolute" element

Ich habe ein problem mit der Zentrierung eines Elements, das das Attribut position eingestellt absolute.
Weiß jemand, warum die Bilder nicht zentriert sind?

CSS:

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

HTML:

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

Sie müssen ul#slideshow eine Feste Breite...

InformationsquelleAutor user1098278 | 2011-12-14

1045
```
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
```
- Dies ist eine wesentlich bessere Antwort als der rest! Gibt es irgendwelche Einschränkungen?
- Klügste Antwort. Ich habe gerade überprüft, und es funktioniert auf allen Browsern. Es funktioniert nicht auf IE8, aber es funktioniert unter IE>=9
- Funktioniert gut, danke! Arbeitet in einem responsive framework!
- Einfach und sauber, funktioniert Prima! Danke!
- Werden Sie sicher, dass der test im IE, dieser trick funktioniert nicht, wenn das element hat ein 'max-width' gesetzt in IE9
- Funktioniert, das beste aus jeder dieser Antworten. +1 für das gut, sir.
- Ich persönlich bevorzuge die syntax "margin: 0 auto; left: 0; right: 0;"
- #Hector Ordonez - er wollte ich das gleiche schreiben Kommentar 🙂
- Funktioniert nicht auf android native browser
- Wenn Sie nicht anwenden, um ein block-element, müssen möglicherweise auch einige geben, die width
- Ist alles zu speichern 1 css-Zeile? o.O
- Rufen Sie mich verrückt, aber ja, ich ziehe eine Linie und nicht zwei.
- Es scheint, dass es funktioniert nicht auf IOS ( iPad ).
- Jedes mal, wenn ich Begegnung Zentrierung problem, das ich sah diese Antwort, aber es nie für mich gearbeitet
- Funktioniert nicht! Es funktioniert nicht ohne width. Downvote
- Dies funktioniert für mich, wenn die Eltern text-align: center;!
- Sie sir, sind erstaunlich.
- Ich würde zumindest margin: 0 auto; 15 chars im Gegensatz zu so etwas wie 65
- auto; nicht für position absolute.
- Dies ganz einfach nicht funktionieren, es sei denn, einer Breite eingestellt ist. Es SCHEINEN zu funktionieren, wenn man text-align:center auf die übergeordneten und nicht über einen hintergrund auf der absolut positioniertes element, aber legen Sie einen hintergrund drauf und du wirst sehen, es ist eigentlich unter der vollen Breite. Die translateX(-50%) Antwort ist die richtige.
- funktioniert nicht.....
- translateX(-50%) ist nicht die einzige Lösung, obwohl, wenn die Breite (W) ist bekannt calc(100% - W/2) funktioniert auch, siehe meine Antwort unten.
- Natürlich, wenn die Breite festgelegt wurde, dann werden die original-CSS gearbeitet haben würde, so nie-mind, der die option übersetzen ist wahrscheinlich am besten.
- Amen, Gott alle mächtigen! (y)
InformationsquelleAutor baaroz
507

Ohne zu wissen, die width/height von der positioniert¹ - element, es ist immer noch möglich, richten Sie es wie folgt:

BEISPIEL HIER
```
.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%) */
}
```
Es ist erwähnenswert, dass CSS Transform unterstützt wird in IE9 und höher. (Vendor-Präfixe der Kürze halber weggelassen)

Erklärung

Hinzufügen top/die left von 50% bewegt sich die oberen/linken Rand Kante des Elements in die Mitte des übergeordneten Elements, und translate() Funktion mit der (negative) Wert von -50% verschiebt das element um die Hälfte seiner Größe. Daher wird das element positioniert in der Mitte.

Dies ist, weil Sie einen Prozentwert auf top/die left Eigenschaften relativ zu der Breite/Höhe des übergeordneten Elements (die eine mit block).

Während die einen prozentualen Wert auf translate() verwandeln Funktion wird relativ zur Breite/Höhe des Elements selbst (Eigentlich ist es bezieht sich auf die Größe der bounding-box).

Für die unidirektionale Ausrichtung, gehen mit translateX(-50%) oder translateY(-50%) statt.

^{1 ist. Ein element mit einem position andere als static. I. e. relative, absolute, fixed Werte.}
- Dies sollte die top-Antwort!!
- Fantastisch! Am besten von der Menge!
- Dies ist der richtige Weg, willkommen in 2015!
- Ich habe überall gesucht, für eine Antwort und eine gute Erklärung. Dies ist die beste Antwort gibt, und eine tolle Erklärung zu! Danke.
- Qolami Ein wenig off-topic von der ursprünglichen Frage, aber mit dieser Methode funktioniert es gut. Allerdings, wenn ich die position auf "fixed", wenn das Fenster zu schmal, die Links neben dem element wird geschoben off der linken Seite des Bildschirms. Gibt es eine Möglichkeit zu stoppen, dies geschieht mit festen Elementen?
- Nicht dieser helfen? In dieser demo das fest positionierte element hat eine max-width von 100% von der enthaltenden block, D. H. der Anzeigebereich (eigentlich der erste mit block).
- Horizontal zentrieren: position: absolute; left: 50%; transform: translateX(-50%); vertikale Zentrierung: position: absolute; top: 50%; transform: translateY(-50%);.
- Vielen Dank für diese. Große Lösung.
- Diese Lösung funktioniert auch, wenn das zentrale element breiter ist als der container (Fällen, in denen Sie versteckt sind, die das überlaufende Teil)
- Machen Sie diese akzeptiert!
- Nur jetzt habe ich festgestellt, dass translate Eigenschaft, übersetzen Sie das element, indem Sie die Größe des selbst, egal, die Größe des übergeordneten Elements ein.
- Die einzig Wahre Antwort hier...
- Dies ist eine sehr gute Antwort. Dies sollte die top-Antwort, es ist Agnostiker zu Breite, und es ist robust.
- Verwenden Sie diese mit einer Polsterung in ::after wenn Sie wollen, um die touch-Oberfläche von element! Beste Antwort, weil es Orte ::after richtig in der Mitte jedes element unabhängig von seiner Größe.
- dies funktioniert wie ein Charme.
InformationsquelleAutor Hashem Qolami
176

Zentrierung etwas absolutely positioniert ist ziemlich verschachtelt, CSS.
```
ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}
```
Ändern margin-left auf (negative) Hälfte der Breite des Elements, die Sie versuchen zu zentrieren.
- Wenn dieses zu testen, es funktioniert nicht, wenn Bilder in verschiedenen Größen, und Sie noch stapeln sich auf einander
- Zu hack-ish (wie fast immer stellt sich heraus, mit css). Aber genial! 🙂
- Ich war in Versuchung, von der cleverness von einigen anderen Antworten, aber nur dieser eine war zuverlässig für mich.
- Ich hatte das gleiche Problem wie Ryan, und so versuchte ich die zweite Antwort vorgeschlagen von "baaroz" und es funktionierte für mich!!! und es unterstützt verschiedene Auflösungen auch, da mein main DIV hat die Breite in % und nicht in PX
- Dies ist nicht wirklich zentriert. Das ist mehr, positioniert auf der rechten Seite
- das ist, weil die benötigten offset war nicht 20px --- left: calc(50% - Wpx/2) aus meiner Antwort funktioniert, aber erfordert Breite bekannt zu sein - an dem Punkt das original-css könnte gearbeitet haben.
- Ich Verschwendete viele Stunden der Suche nach dieser Antwort. Es funktionierte für mich. Thanks a lot, you saved my day
InformationsquelleAutor bookcasey
78

Div vertikal und horizontal ausgerichtet-center
```
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
```
Hinweis : die Elemente sollen die Breite und Höhe eingestellt werden
- Ich weiß nicht, warum dies nicht mehr gestimmt. Funktioniert in allen Browsern, einschließlich mobile Browser, soweit ich das sagen kann. Nähte zuverlässiger im Hinblick auf die Unterstützung. Es ist einfach, schnell und sauber...
- Das ist eine bessere Antwort. Es erfordert nur einen div zu machen und hat mehr Fälle als das aufrufen von Links:50%; top:50%; wie die Lösung mit 69+ Stimmen
- die beste Antwort bisher, jeder kommt hier sollten check it !
- Das element muss auch ein height gesetzt, für diese zu arbeiten.
- Ehrfürchtige Antwort mein problem gelöst
InformationsquelleAutor Sebin Simon
51

Einem einfachen CSS-trick, nur hinzufügen:
```
width: 100%;
text-align: center;
```
Dies funktioniert auf beiden Bildern und text.
- Ich habe bereits von Ihnen positiv bewertet werden, aber könntest du irgendeine Erklärung?
InformationsquelleAutor cutez7boyz

Wenn Sie wollen-center ein absolutes element

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

Wenn Sie möchten einen container zentriert werden, von Links nach rechts, aber nicht mit der Oberseite nach unten

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

Wenn Sie möchten einen container zentriert werden, von oben nach unten, unabhängig von Links nach rechts

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

Update Dezember 15, 2015

Gut ich lernte, diese anderen neuen trick vor einigen Monaten. Angenommen, Sie haben einen relativen Elternelement.

Hier geht Ihr absolutes element.

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

Mit dabei, ich denke, es ist eine bessere Antwort als meine alte Lösung. Da Sie nicht haben, um geben Sie die Breite UND Höhe. Dieses eine, es passt der Inhalt von dem element selbst.

dies ist eine perfekt funktioniert

InformationsquelleAutor Wesley Brian Lachenal

Dieser arbeitete für mich:

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

InformationsquelleAutor Deplake

center ein ein position:absolute Attribut, das Sie benötigen, um left:50% und margin-left: -50% von der Breite des 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>

für vertikale Zentrierung absolut Sie müssen das gleiche zu tun, was bud nicht mit der linken, nur mit der Spitze.
( HINWEIS: html und body müssen min-height 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>

kombiniert werden kann für beide

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

Super Antwort, vielen Dank für das teilen dieses!
Dies funktioniert bei mir nicht 🙁
Große arbeiten wie ein Charme.

InformationsquelleAutor Rednas

Schwerpunkt "position: absolute" element.

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

Auf null Werte, die Sie don ' T brauchen eine unit.

InformationsquelleAutor Vadamadafaka

16
```
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>
```
siehe demo auf: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; arbeitet mit einem position: absolute element beim hinzufügen left: 0; right: 0;
- Bitte geben Sie irgendeine Art von Kommentar oder Begründung, warum dieser code funktioniert. Code Antworten selbst wird unweigerlich zur Löschung vorgemerkt.
InformationsquelleAutor Mohammad Dayeh

Je einfacher die besten:

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

Dann müssen Sie legen Sie Ihre img-tag in einen tag, der Sport-position:relative Eigenschaft wie folgt:

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

InformationsquelleAutor Stéphane de Luca

7

Wenn Sie nicht wissen, die Breite des Elements können Sie diesen code verwenden:
```
<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 auf fiddle: http://jsfiddle.net/wrh7a21r/

Quelle: https://stackoverflow.com/a/1777282/1136132
- funktioniert nicht, wenn in einem div jsfiddle.net/wrh7a21r/15
- dieses Beispiel ist nützlich, wenn Sie nicht wissen, die Breite des Elements. In Ihrem Beispiel, Sie legen die Breite der div.
InformationsquelleAutor joseantgv

wahrscheinlich die kürzeste

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

InformationsquelleAutor Cris

5

Ich bin mir nicht sicher, was du erreichen willst, aber in diesem Fall nur das hinzufügen width: 100%; zu Ihrem ul#slideshow li wird den trick tun.

Erklärung

Den img tags sind inline-block Elemente. Dies bedeutet, dass Sie fließen wie inline-text, aber auch eine Breite und Höhe wie der block-Elemente. In der css gibt es zwei text-align: center; Regeln angewendet, um die <body> und die #slideshowWrapper (was überflüssig ist, btw) das macht alle inline und inline-block Kind-Elemente zentriert werden in den nächsten block-Elemente, in deinem code sind diese li - tags. Alle block-Elemente haben width: 100% wenn Sie die static flow (position: static;), das ist Standard. Das problem ist, dass, wenn Sie sagen li tags position: absolute; haben, nehmen Sie Sie aus der normalen statischen Fluss, und dies bewirkt, dass Sie schrumpfen Ihrer Größe passen Sie einfach Ihren inneren Gehalt, in anderen Worten, die Art von "verlieren" Ihre width: 100% Eigenschaft.

InformationsquelleAutor Konstantin Kalbazov
5

Verwenden
left: calc(50% - Wpx/2); wo W ist die Breite des Elements funktioniert für mich.
- Wie bestimmen Sie, W?
- Er sagte der "Bild" - ideal, wenn dabei Bilder für das web sind Sie angeblich, um das Bild in der Größe, dass du gehst, es zu benutzen (anstatt Sie zu verkleinern), um das unnötige Gewicht (wenn man ein großes Bild klein) oder Unschärfe (wenn man ein kleines Bild groß). - Sie können mit "imageElement.naturalHeight" und "imageElement.naturalWidth" wenn man mithilfe von jQuery und dann Stil dynamisch zu, aber das ist immer ein bisschen kompliziert. Um fair zu sein, viele der anderen Antworten auch verlangen, dass Sie wissen, die Breite des Bildes für Ihre Technik zu arbeiten.
- wenn Sie tatsächlich unklar, wie Sie W wenn in Chrome kannst du mit STRG+Shift+i (developer tools), dann STRG+Shift+C (überprüfen-Modus) bewegen Sie den Mauszeiger über die Elemente und sehen, wie weit die Dinge sind. Man kann sich eben auch entscheiden, wie weit Sie es wollen, und fügen Sie "Breite: Wpx", um Ihre css-Dateien.
InformationsquelleAutor Julix

Ihre Bilder nicht zentriert sind, weil Sie Ihre Liste der Elemente, die nicht zentriert sind; nur Ihr text wird zentriert. Sie können erreichen, die Positionierung, die Sie möchten, indem Sie entweder die Zentrierung der gesamten Liste oder Zentrierung der Bilder in der Liste.

Einer überarbeiteten version der code kann gefunden werden an der Unterseite. In meiner revision habe ich Mitte der Liste und die Bilder innerhalb es.

Die Wahrheit ist, dass Sie nicht center ein element, das eine position, die absolute.

Aber dieses Verhalten kann nachgeahmt werden!

Hinweis: in Dieser Anleitung wird die Arbeit mit DOM-block-element, nicht nur img.

Umgeben, Ihr Bild mit einem div oder anderen tag (in Ihrem Fall li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Hinweis: Die Bezeichnungen dieser Elemente sind nicht besonders.

Ändern Sie Ihre css-oder scss zu geben, die div mit absoluter Positionierung und Ihrem image zentriert.

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

Und dort haben Sie es! Ihre img-sollte zentriert sein!

Code:

Probieren Sie es aus:

CSS:

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

HTML:

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

Ich hoffe, das war hilfreich. Viel Glück!

InformationsquelleAutor D3RPZ1LLA

Einem absoluten Objekt innerhalb eines relativen Objekt relativ zu seinem Elternteil, das problem hier ist, dass brauchen Sie eine Feste Breite für den container #slideshowWrapper , und der rest der Lösung ist wie die andere Benutzer sagt

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/

Ihre Geige, wie die beiden Bilder stapeln bis man einen anderen.
Danke, @RTGibbons ,habe ich bereits aktualisiert

InformationsquelleAutor eveevans

Hier ist die einfache und beste Lösung für center-element mit "position: absolute"

CSS:

 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
 }

HTML:

<style>

</style>

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

InformationsquelleAutor SantoshK

1

Position absolute, nimmt es aus dem Fluss und legt es auf 0x0 zu den Eltern ( Letzte block-element mit position absolute oder relative position ).

Ich bin mir nicht sicher, was genau Sie sind, was Sie versuchen zu erreichen, könnte Es am besten sein, um die li zu einem position:relative und zentrieren Sie Sie. Angesichts Ihrer aktuellen CSS -

Check-out http://jsfiddle.net/rtgibbons/ejRTU/ mit ihm zu spielen
- :/ am Ende ist fast die gleiche Lösung wie deins... < Up abstimmen
InformationsquelleAutor Ryan Gibbons

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

Ich kann mich nicht erinnern, wo ich sah die Zentrierung Methode oben aufgeführten, mit negativen top, right, bottom, left Werte.
Für mich tehnique ist die beste, in den meisten Situationen.

Wenn ich die Kombination von oben, das Bild verhält sich wie ein background-image mit folgenden Einstellungen:

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

Mehr details über das erste Beispiel kann hier gefunden werden:

Behalten Sie das Seitenverhältnis von einem div mit der CSS

InformationsquelleAutor Marian07

Können Sie versuchen, auf diese Weise :

CSS:

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

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

InformationsquelleAutor Chirag Dave

Was passiert zu sein scheint ist, gibt es zwei Lösungen; zentriert mit Margen und zentriert mit position. Funktionieren beide gut, aber wenn Sie wollen, um die absolute position eines Elements relativ zu diesem element zentriert, Sie benötigen, um die absolute position Methode, da die absolute position des zweiten Elements standardmäßig die ersten Eltern, die positioniert ist. Etwa so:

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

Bis ich gelesen hatte diesen posten, mit dem margin:0 auto Technik, bauen ein Menü auf der linken Seite meine Inhalte, die ich hatte zu bauen, die eine gleiche Breite Spalte auf der rechten Seite auszugleichen. Nicht schön. Danke!

InformationsquelleAutor Deane Nettles

0

Verwenden margin-left: x%; wobei x der Hälfte der Breite des Elements.

InformationsquelleAutor Bibaswann Bandyopadhyay

-1

CSS:

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

HTML:

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

Diese Antwort hat nur code. Zwar mag es richtig sein, sollte es eine begleitende Erklärung, warum der code beantwortet die OP ' s Frage. Code ist nicht "selbst explanitory" auf Stack Exchnge.

InformationsquelleAutor antelove

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Erklärung

Erklärung

Aber dieses Verhalten kann nachgeahmt werden!

Und dort haben Sie es! Ihre img-sollte zentriert sein!

Code: