CSS - DIV vertikal zentrieren - Software, allgemein

Liquidator

Senior Member

CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 17:41

1

Tach zusammen. Gleich voweg: Ich bin in CSS Anfänger!

So. Ich versuche ein DIV mit 500 px Höhe und 100% breite vertikal auf der Seite zu zentrieren. Gibts da ne einfache Möglichkeit? Google spuckt nur seltsame Workarounds aus, durch die ich nicht ganz durchsteige.

Vielen Dank schonmal.

TrOuble

God

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 17:57

2

Moin,

hab dir mal kurz was gebastelt - geht auch ohne hässliche Hacks

http://simplyray.de/tmp/ac.html

Hier noch mal der Code...
html:

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
      <div id="container">

      </div>
</div>

</body>
</html>

und css:

Quellcode

* {
margin:0;
padding:0;
}
#container {
      width:100%;
      height:500px;
      background-color:red;
      position:relative;
      top:50%;
      margin-top:-250px;      
}
#wrapper  {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
}

Gucks dir mal am besten an und falls du was nicht verstehst dann einfach fragen

Der Container wird einfach relativ zum #wrapper (der absolute positioniert ist und 100% breite sowie 100% weite des Viewframes einnimmt) positioniert. Und zwar liegt die obere Kante des #container genau bei 50% höhe des Wrappers - da der #container allerdings selbst eine Höhe hat (die 500px) musst du die natürlich noch abziehen - dies geschieht mit den margin-top:-250px

Gruß TrOuble

Y0Gi

God

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 20:05

3

Ich positioniere vertikal zentriert mit einer Kombination aus

line-height: ?;
margin: auto;
vertical-align: middle;

und möglicherweise noch anderen. `line-height` wende ich dabei auf einen Wrapper-Container an.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Liquidator

Senior Member

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 21:37

4

dankööö...hat geklappt

TrOuble

God

Re: CSS - DIV vertikal zentrieren

Samstag, 30. August 2008, 14:58

5

Zitat von »Y0Gi«

Ich positioniere vertikal zentriert mit einer Kombination aus

line-height: ?;
margin: auto;
vertical-align: middle;

und möglicherweise noch anderen. `line-height` wende ich dabei auf einen Wrapper-Container an.

Ich bin mir nicht ganz sicher wie das funktionieren soll - haste zufällig mal nen Code Beispiel da?

Zitat von »Liq«

dankööö...hat geklappt

Kein Problem

Gruß TrOuble

Y0Gi

God

Re: CSS - DIV vertikal zentrieren

Samstag, 30. August 2008, 15:58

6

Ray: Ich konnte das so ebenfalls nicht für obiges Beispiel bzw. die Anforderung reproduzieren. Allerdings hat es für mich funktioniert um (Galerie-)Bilder in "Cards", also fließenden Blöcken, horizontal und vertikal zu zentrieren.

Mein VCS-Log spuckt diese Schnipsel aus:

Quellcode

ol.images {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol.images li {
    float: left;
    height: 190px;
    margin: 4px;
    text-align: center;
    width: 156px;
}
ol.images li div {
    line-height: 156px;
}
ol.images li img {
    margin: auto;
    vertical-align: middle;
}

aus dem Stylesheet sowie

Quellcode

<ol class="images">
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
</ol>

an Markup.

Normalerweise verwende ich für Cards eine andere Verschachtelung, nämlich die Caption in einem <div> und das <img> ohne Container.

Die Formatierung ist IIRC für eine maximale Bildgröße von 150x150 ausgelegt. Hat auf jeden Fall funktioniert, cross-Browser. Evtl. habe ich etwas aus dem übergeordneten Kontext übersehen, das das Konstrukt essentiell beeinflussen muss, damit es klappt. Aber es ging! ;D

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)