CSS - DIV vertikal zentrieren - Software, allgemein

CSS - DIV vertikal zentrieren

Bonjour, visiteur, bienvenue sur les forums Aqua Computer Forum. Si c’est votre première visite, nous vous invitons à consulter l’Aide. Elle vous expliquera le fonctionnement de cette page. Pour avoir accès à toutes les fonctionnalités, vous devez vous inscrire. Pour cela, veuillez utiliser le formulaire d’enregistrement, ou bien lisez plus d’informations sur la procédure d’enregistrement. Si vous êtes déjà enregistré, veuillez vous connecter.

Liquidator

Senior Member

CSS - DIV vertikal zentrieren

vendredi 29 août 2008, 17:41

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

vendredi 29 août 2008, 17:57

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:

Code source

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

Code source

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

vendredi 29 août 2008, 20:05

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

vendredi 29 août 2008, 21:37

dankööö...hat geklappt

TrOuble

God

Re: CSS - DIV vertikal zentrieren

samedi 30 août 2008, 14:58

Citation de "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?

Citation de "Liq"

dankööö...hat geklappt

Kein Problem

Gruß TrOuble

Y0Gi

God

Re: CSS - DIV vertikal zentrieren

samedi 30 août 2008, 15:58

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:

Code source

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

Code source

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