div- im div-Element zentrieren

d4rkdr4g0n1

Hallo liebes Forum,

Ich habe folgendes Problem das ich leider nicht lösen kann. Ich würde gerne die zwei Inline-Blocks(Name und Email) in einem übergeordneten Div zentrieren. Ein Foto zur Problemstellung habe ich unten angefügt. Ich habe versucht die 2 Blöcke mit margin-right: 50%; und margin-left: 50; zu zentrieren aber jedoch ohne Erfolg. text-align: center; funktioniert auch nicht, sowie left: 50%;
Bin schon echt verzweifelt das ich an so etwas vermutlich leichtem scheitere. Die borders habe ich nur zur meinem Verstädnis angehängt um das Problem zu lösen.

HTML

<head>
  <style>
  body {
   font-family: Verdana, Arial, sans-serif;
   color: #666666;
   background-color: #F7F9F9;
   margin: 0px;
  }


  .wrapper {
   width: 80%;
   height: 80%;
   margin: 80px auto;
   border: 1px solid black;
  }


  .side-content {
   width: 50%;
   float: right;
   border: 1px solid black;
  }


  .side-content .form-group {
   width: 25%;
   display: inline-block;
   padding: 10px;
   border: 1px solid black;
  }
  .form-control {

  }
  </style>
    </head>
    <body>
  <div class="wrapper">
   <div class="side-content">
    <div class="form-group">
       <label for="name">Name:</label>
       <input type="text" class="form-control" id="name">
    </div>
    <div class="form-group">
       <label for="email">Email:</label>
       <input type="text" class="form-control" id="email">
    </div>
   </div>
  </div>
    </body>

Alles anzeigen

danke,
Gregor

MrMurphy

Hallo

Du hast wahrscheinlich unbewußt mehrere Probleme in die Webseite eingebaut.

Wenn du .wrapper eine Hintergrundfarbe geben würdest, zum Beispiel ein knalliges Orange, würdest du feststellen, dass der Container überhaupt keine Höhe hat.

Das kommt durch das float von .side-content, welches den Container .side-content aus dem Dokumentenfluß nimmt. Damit ist es kein Inhalt von .wrapper mehr und kann weder die Höhe von .wrapper beeinflussen noch innerhalb von .wrapper zentriert werden. float solltest du erst verwenden wenn du es verstanden hast und mittels clear oder clearfix auch wieder "einfangen" (beenden) kannst.

Die prozentuale Höhenangabe von .wrapper ( height: 80%; ) hat zudem keine Auswirkung. .wrapper kann mit Prozentangaben nur so hoch werden wie sein umgebender Container (body) und dessen umgebender Container (html). Du musst also zunächst dafür sorgen, dass die überhaupt eine Höhe mit Platz zum Zentrieren haben. Und dabei darauf achten, dass alle gängigen Browser das auch verstehen.

Weiterhin hast du den Doctype vergessen. Der sollte heutzutage HTML5 aufrufen. Dann könntest du auch aussagekräftigere Containerelemente wie main, article, section und so weiter verwenden.

Wenn das alles korrigiert ist geschieht das Zentrieren ganz einfach mittels Flexbox.

Wenn es nur ums seitliche zentrieren geht kannst du auch float streichen und .side-content ein linkes und rechtes margin mit dem Wert "auto" geben.

Nachtrag:

Der Beginn der Datei mit dem Doctype könnte zum Beispiel folgendermaßen aussehen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>

und das CSS folgendermaßen. Ich habe zu löschende Angaben erst mal nur auskommentiert und den Rahmen zur Kenntlichmachung eine größere Breite und knallige Farben verpasst. Um das Zentrieren in der Höhe habe ich mich erst mal nicht gekümmert da ich nicht weiß, ob du das überhaupt willst und ich deine height-Angabe falsch interpretiert habe:

Code

body {
         font-family: Verdana, Arial, sans-serif;
         background-color: #F7F9F9;
         color: #666666;
         margin: 0px;
      }
      .wrapper {
         width: 80%;
         height: 80%;
         border: 4px solid blue;
         margin: 80px auto;
      }
      .side-content {
         width: 50%;
         /*float: right;*/
         border: 4px solid green;
         margin: 0 auto;
         display: flex;
         justify-content: center;
      }
      .side-content .form-group {
         width: 25%;
         /*display: inline-block;*/
         padding: 10px;
         border: 4px solid red;
      }
      .form-control {
      }

Alles anzeigen

Am Quellcode habe ich auch nichts geändert um dich nicht zu sehr zu verwirren, den kannst du also beibehalten.

Gruss

MrMurphy

d4rkdr4g0n1

Uff wie ich sehe habe ich das von Grund an falsch gemacht und verstanden.
Meine Idee war das ich einen .wrapper erstelle denn in die Mitte setze. Der soll 80% der ganzen Fläche füllen und mittig stehen. Diesen .wrapper wollte ich in 2 hälften teilen. Eine Hälfte soll ein Bild füllen und die 2 Hälfte ist für ein Content gedacht. Und in dieser rechten Content hälfte sollte ein Contact-Formular wieder mittig gesetzt werden.

Jetzt ist meine Frage in Bezug auf deine Antwort. Wie erkenne ich einen Dokumentenfluß ?
Den .wrapper habe ich nur eine höhe gesetzt um zu sehen wie es sich verhält.
sonst würde ich das so programmieren:

HTML

.wrapper {     border: 1px solid #665544;     overflow: auto;     width: 80%;     margin: 80px auto;

MrMurphy

Hallo

Deine Überlegungen zur Gestaltung erscheinen mir nicht ausgereift.

Hast du dabei nur deinen Browser vor Augen und in deinen Gedanken?

Was ist mit Besuchern, die ihren Browser in anderer Größe benutzen? Zum Beispiel nur eine Bildschirmhälfte ausfüllen und in der anderen ein anderes Programm laufen lassen? Oder Smartphones / Tablets / Notebooks verwenden? Die dann auch im Wechsel von Hoch- und Querformat?

Wie soll sich die Seite dann verhalten?

Gruss

MrMurphy

d4rkdr4g0n1

Nun wollte zuerst eben nicht responsiv die Seite aufstellen und dann die selbe mit bootstrap-grid. Die Seite soll nicht ausgereift sein, soll nur ledeglich zum üben da sein.

MrMurphy

Hallo

Zitat

soll nur ledeglich zum üben da sein

Ich habe mal eine Seite mit dem Grundlayout wie von dir beschrieben erstellt. Mit Inhalt kannt du es dann ja selbst füllen.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox zentrieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         min-height: 100vh;
         height: 100%;
      }
   }


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      body {
         margin: 0;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .wrapper {
         width: 80%;
         height: 80vh;
         border: 4px solid blue;
         display: flex;
         justify-content: center;
      }
      .aside {
         border: 4px solid orange;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 8px - 0rem);
      }
      .side-content {
         border: 4px solid green;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 8px - 0rem);
      }
   }


   </style>
</head>
<body>
   <div class="wrapper">
      <div class="aside">
         <h2>.aside (Bild)</h2>
      </div>
      <div class="side-content">
         <h2>.side-content (Formular)</h2>
      </div>
   </div>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

d4rkdr4g0n1

Danke für das coden. Flexbox scheint ja ideale lösung dafür zu sein !

Tags