Ich habe ein Div, welches ich auf der gesamten Seite, d. h. im ganzen Viewport des Browsers, sowohl horizontal als auch vertikal zentrieren möchte. Das habe ich hinbekommen. Nun möchte ich aber noch ein Footer-Element (hier eine kurze Textzeile) darunter platzieren.
Das Problem ist aber, dass ich das zentrierte Div auf
Hier eine auf das nötigste abgespeckte Version der Website (die fragliche Absolutpositionierung ist hier):
Hier auch direkt zum Testen/Bearbeiten bei JSFiddle: jsfiddle.net/o7r0cvgc/
Achtung: Das ganze ist responsive! Sollte der Text oben sein, so ist das Fenster zu klein! In der Mobilansicht ist der Footer korrekterweise unten.
Ich denke, meine Frage sollte nicht lauten, wie ich den Footer nach unten bekomme, sondern wie ich das Visitenkarten-Div (mit dem Rahmen) auf der Seite zentriert bekomme, ohne eine absolute Position zu setzen.
Hat jemand eine Idee?
Das Problem ist aber, dass ich das zentrierte Div auf
position:absolute
setzen musste, damit die Zentrierung klappt. Dadurch wird das Div natürlich aus dem Fluss der Seite genommen und ein darunter platziertes Element ist dann ganz oben. Das Element darunter auch absolut zu platzieren wird nicht gehen, da ich die nötige Position nicht kenne. Ich kenne lediglich die Höhe des zentrierten Divs, nicht aber dessen Bottom-Position.Hier eine auf das nötigste abgespeckte Version der Website (die fragliche Absolutpositionierung ist hier):
CSS-Quellcode
- .vcard {
- margin: 0 auto;
- display: table;
- width: 100%;
- }
- div[id^="col-"] {
- width: 100%;
- }
- .clearfix::after {
- content: "";
- clear: both;
- display: block;
- }
- @media (min-width: 25em) {
- body {
- font-size: 100%;
- }
- .vcard {
- margin: 5% auto;
- border: 0.05em solid #005596;
- width: 15em;
- }
- }
- @media (min-width: 45em) {
- div[id^="col-"] {
- width: 50%;
- float: left;
- }
- .vcard {
- margin: 0 auto;
- width: 30em;
- height: 19em;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- display: block;
- }
- div[id^="col-"] {
- height: 9em;
- }
- }
Hier auch direkt zum Testen/Bearbeiten bei JSFiddle: jsfiddle.net/o7r0cvgc/
Achtung: Das ganze ist responsive! Sollte der Text oben sein, so ist das Fenster zu klein! In der Mobilansicht ist der Footer korrekterweise unten.
Ich denke, meine Frage sollte nicht lauten, wie ich den Footer nach unten bekomme, sondern wie ich das Visitenkarten-Div (mit dem Rahmen) auf der Seite zentriert bekomme, ohne eine absolute Position zu setzen.
Hat jemand eine Idee?