• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Div vertikal+horizontal zentrieren

K

Kygo

Neues Mitglied
Moin,

ich möchte ein "Fancybox/Lightbox" selbst erstellen. Komme aber nicht wirklich klar. Ich nehme die fertigen nicht, da ich sie für mein Projekt nicht gebrauchen kann. Möchte es ganz schlicht und einfach haben.

Allerdings komme ich damit nicht ganz klar (arbeite gerne mit CSS, aber damit bin ich etwas überfordert :D).

http://jsfiddle.net/LdbsrpwL/

ich schaffe es nicht, das der Content in der mitte soll (vertikal als auch horizontal). Der Content soll später von einer anderen Seite die Höhe als auch die Weite übernehmen. Deshalb kann die Klasse Content keine feste größe bekommen.
 
Da du es anscheinend geschafft hast, jetzt nur an die anderen Nutzer:
Code: 
#div {
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
background-color:#ff0000;//nicht wichtig
margin-left:-50px;//haelfte von width
margin-top:-50px;//healfte von height
}
 
So ist vielleicht besser.
Code: 
<!DOCTYPE html>
<html
><head>
<meta charset=utf-8>
<title>Vertikal zentrieren mit  :before</title>
<style>
* {
 margin:0;
 padding:0;
}

html, body  {
 height: 100%;
}

body {
 text-align:center;
}

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
}
.box:after  {
 content:"";
 vertical-align:middle;
 display:inline-block;
 height:100%;
}
.box-content {
 display:inline-block;
 vertical-align:middle;
 background:#fff;
}



</style>
</head>

<body>
<div class="box">
 <div class="box-content">
  <p>HTML</p>
 </div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben