[ERLEDIGT] IMG per CSS vertikal horizontrien

[htmlberliner]

Guten Tag, wie kann ich ein IMG (evtl. im DIV-Container) horizontrieren, wenn height: 100% (also der Bildschirmhöhe) entspricht?

 

[MrMurphy]

Hallo

Mit Flexbox. Dem Elternelement

      display: flex;
      justify-content: center;
      align-items: center;

zuweisen.

Gruss

MrMurphy

 

[SpiceLab]

Zentrierung mit Flexbox..., da war doch erst vorhin was...

Die Navigation via CSS zentrieren

Mit Flexbox: https://www.w3schools.com/code/tryit.asp?filename=FF76L0769T38 - "Run"-Button klicken

float:left für <li> ist damit dann obsolet.

Flexbox-Quellen (kleine Auswahl - Google kennt noch mehr, falls sie nicht ausreicht):

• https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/ - Achtung: Jahrgang 2013 - Hinweise zum Browsersupport nicht mehr aktuell!
• http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts - Achtung: Jahrgang 2012 - Hinweise zum Browsersupport nicht mehr aktuell!
  
• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
  
• http://www.on-design.de/tutor/html5_css3/css3/flexbox.html
  
• https://www.w3schools.com/css/css3_flexbox.asp

Zu https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_center gesellt sich https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_center dazu

 

[SpiceLab]

Zentrierung mit Flexbox..., da war doch erst vorhin was...
Zu https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_center gesellt sich https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_center dazu

Schnittmenge: https://www.w3schools.com/code/tryit.asp?filename=FF7F5ODZ7JRM - "Run"-Button klicken