Inhalt absolut mittig plaziert

Status
Nicht offen für weitere Antworten.
Marco-P

Marco-P

Erfahrenes Mitglied
Hallo Leute,

ich möchte denn inhalt (bild) eines quadratischen div elements absolut mittig haben. egal wie groß das bild auch ist. Ich bekomme nur die Horizontale ausrichtung hin. Aber die Vertikale ist mir nicht gegönnt.

MFG Marco
 
Hallo Marco,

ich würde es mit CSS so lösen:

HTML: 
 <div style="bottom:50%; height:1px; left: 50%; position:absolute; width:1px;">
        <div style="left:-180px; height:248px; position:relative; top:-124px; width:360px;">
        	<img src="bild.gif" width="360" height="248" />
        </div>
    </div>

Der erste DIV ist um die Mitte des Bildschirms zu finden.
Der zweite setzt einen Layer der aus dem ersten raus läuft. Mit den Minuswerten behältst du die zentrierte Position bei.
Bildbreite = 360 / Position = -180px
Bildhöhe = 248 / Position = -124px

Ich habe es bei mir mal im IE und FF ausprobiert und es funktioniert.

Das Problem an der Sache ist, dass das Bild sich in den nichtscrollbaren Bereich links und oben legt sobald das Fenster kleiner als das Bild ist. Wenn du dem vorbeugen möchtest, dann guck mal hier

LG
 
Zuletzt bearbeitet:
Ne so funktioniert das nicht.

HTML: 
<div id="bild1"><img src="http://...." /></div>

also das währe das div element das ist mitels CSS positioniert.

HTML: 
#box #container #bild1 {
	margin: 10px;
	width: 225px;
	top: 0;
	left: 0;
	height: 200px;
	text-align: center;
}

wie gesagt Horizontal geht das aber vertikal bekomme ich es nicht hin.
Es ist auch so das wenn ich ein anderes Bild importiere es immernoch in der mitte sein soll.
 
Ja das funktioniert schon. aber bei mir nur im firefox und nicht im InternetE
also von daher na ja
 
Hi,

kann ich leider nicht nachvollziehen. Bei mir funktioniert das Beispiel des ersten Links aus Maiks Beitrag (#2) auch im IE (von Version 5.01 bis einschliesslich 7).

Mein Testdokument sah folgendermassen aus:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
.holderDiv{ position: relative;
            display: table;
            vertical-align: middle;
            text-align: center;
            width: 300px;
            height: 300px;
            background: #00c;}
.imgDiv{ display: table-cell;
         text-align: center;
         vertical-align: middle;
         position: relative;
         width: 100%;}
 //-->
</style>
<!--[if IE ]>
<style type="text/css">
.imgDiv{ top: 50%;
         left:0;}
.imgDiv img{ position: relative;
             top: -50%;}
</style>
<![endif]-->
</head>
<body>
<div class="holderDiv">
  <div class="imgDiv">
    <img src="bild.gif" width="120" height="120" border="0" alt="">
  </div>
</div>
</body>
</html>
(Quelle: http://www.pmob.co.uk/temp/vertical-align3.htm)

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück