✔ Bild immer Mittig

RMS

RMS

Grünschnabel
Hallo wie bekomme ich das hin das mein Bild immer mittig ist, auch wen man das Fenster kleiner und größer macht!
 
Mit CSS bekommt man das hin :)

1. Horizontal:
HTML: 
<body>
  <img ...>
</body>
CSS: 
body {text-align:center}
oder
CSS: 
img {display:block;margin:auto}
2. Horizontal und Vertikal:
HTML: 
<body>
  <ul>
    <li><img ...></li>
  </ul>
</body>
CSS: 
* {margin:0;padding:0}
html,body,ul{height:100%}
ul {display:table;width:100%}
li {display:table-cell;text-align:center;vertical-align:middle}
 
Zuletzt bearbeitet:
Hab eine andere Lösung!

HTML: 
<img src="" width="" height="" class="center" />
CSS: 
.center {
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
}
 
Dann kannst du es auch etwas besser machen
Code: 
.center {
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
margin:auto;
}

Sollte auch von fricca sein.
 
Okay, diese Technik war mir nicht mehr präsent, da ich mittlerweile weitesgehend auf absolute Positionsangaben verzichte, insbesondere beim Zentrieren eines Elements :D

Anyway, wie sich ein Bild im Viewport zentrieren lässt, dürften wir in allen Facetten beleuchtet haben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück