2016-08-14 16 views
-1

Hallo, ich machte eine Website und ich erkannte gerade, dass wenn ich das HTML-Element positionieren möchte, wird es das Element mit der rechten Seite davon positionieren. Hier ist ein Beispiel, was ich meine. Ich habe versucht, ein Bild in der Mitte mit Prozentsätzen zu positionieren. Getrimmte Version meines CSS-Codes: .image{position:absolute;right:50%; Also wenn ich die Website geladen, zeigt es sich mit der rechten Ecke des Bildes bei 50%, nicht die Mitte des Bildes bei 50%. Gibt es trotzdem eine Position, in der die Mitte des Bildes verwendet wird, um das Bild auf 50% zu positionieren, und nicht der linke oder rechte Rand des Bildes bei 50% liegt? Ich möchte nicht etwas wie position:absolue;right:45%, um das Bild zu verschieben, sondern verwenden Sie die Mitte des Bildes, um das Bild zu positionieren. Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen.CSS Position mit Mittelpunkt des Elements, um Element mit Prozentsatz

+0

Willkommen bei SO. Bitte versuchen Sie die Suchoption, bevor Sie eine Frage stellen. Dies wurde bereits oft gestellt (und beantwortet). Danke – Aziz

Antwort

3

Legen Sie eine Breite für das Bild fest und legen Sie dann den linken und rechten Rand auf auto fest.

` {width: whatever you want; margin-left: auto; margin-right: auto; } ` 
+0

Nachdem ich die Breite und die Ränder eingestellt habe, setze ich dann die Position? –

+0

Entschuldigung, ich hätte klarer sein sollen. Wenn Sie es als absolute Position behalten möchten, stellen Sie das zuerst ein und fügen Sie dann links hinzu: 0; rechts: 0; dann füge hinzu, was ich oben erwähnt habe. –

+0

Gerade versuchte es .. scheint zu arbeiten! Vielen Dank! Heres der Code, den ich verwendete: '.gold { background-image: url (../ pics/emblems/Gold.jpg); Breite: 200px; links: 0; rechts: 0; Rand links: Auto; Rand rechts: Auto; Position: absolut; Textausrichtung: Mitte; } 'Die Frage, die ich habe, ist, was links: 0 und rechts: 0 tun? –

1
  1. Sie es leicht text-align tun können, verwenden, wenn Element, das Sie Position wollen innerhalb einiger Behälter, das heißt:

HTML:

<div class="container"> 
     <div class="image">Center me!</div> 
    </div> 

CSS:

.container { text-align: center } 
    .image { display: inline-block } 
  1. Zweiter Ansatz: Wenn Sie die Breite des Elements kennen (.image). Lassen Sie uns sagen, dass es 400px breit ist:

CSS

.image { 
     position: absolute; 
     left: 50%; 
     margin-left: -200px; 
    } 

Ein wenig kompliziert, kann ein Problem verursachen, wenn die Breite des Bildschirms niedriger als Breite des Elements ist.

+0

Danke, aber für den ersten benutze ich etwas Text, also wenn ich text-align: center mache, zentriert es nur den Text relativ zum Bild. Auch habe ich vergessen zu erwähnen, aber das Bild, das ich verwende, wird mit CSS 'background-image: url (source)' eingefügt. –

Verwandte Themen