Element mit CSS in der Mitte positionieren

Um ein Element in der Mitte eines anderen Elements mit CSS zu positionieren muss man unter Umständen etwas improvisieren.

Für die horizontale Mitte ist es keine Schwierigkeiten. Folgendermassen mache ich es jeweils:

.container {
  display: block;
  text-align: center;
  width: 100%;
}

.child {
  position: relative;
  margin: auto;
}

Um aber die vertikale Mitte zu erreichen, ist es leider ein wenig schwieriger und vor allem kontextabhängig.

Wenn das Layout aus Tabellen besteht, so reicht vertical-align : middle;. Leider funktioniert dies nicht mit anderen Elementen wie zum Beispiel einem p in einem div.
Diese könnte man per CSS mit

.container {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

zu einer Tabelle machen.

Wenn bloss eine einzelne Zeile Text zentriert werden soll, so kann man dies mit line-height: Irgendwieviele px; erreichen.

Für block Elemente, die man nicht zu einer Tabelle machen möchte, gibt es noch die Möglichkeit von negativem margin und absoluter positionierung. Das sähe zum Beispiel folgendermassen aus:

.container {
  position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Diese Lösungen funktionieren in den meisten Browsern, jedoch leider nicht mit allen HTML Tags. Es gibt ausserdem noch weitere Lösungen, mit denen ich jedoch noch keine Erfahrungen gemacht habe. Was haben Sie für Erfahrungen gemacht? Welche Lösung bevorzugen Sie? Schreiben Sie Ihre Antwort in die Kommentare oder senden Sie sie mir per e-Mail.

Website in PowerPoint einbinden

Wenn Sie eine Microsoft PowerPoint Präsentation vorzeigen, so haben Sie bestimmt auch schon die Vorteile der Referenztools genossen. Ob die Notizen, der Laserpointer oder die Stoppuhr – auch ich bevorzuge diese Ansicht zum präsentieren. PowerPoint wechselt dabei, wenn man den Computer an einen Beamer angeschlossen hat, von “Die Anzeige duplizieren” auf “Die Anzeige erweitern”, so dass der Beamer als zweite Anzeige, eben für die Präsentation, dient.

Durch diesen automatischen Wechsel kann man anschliessend nicht einfach so ein anderes Programm wie z. B. einen Browser öffnen und es auf dem Beamer anzeigen. Das verschwert bedauerlicherweise das anzeigen von Websites während einer Präsentation. Es gibt zum Glück einige Lösungen.

Lösung #1

Screenshots: lassen Sie durch ein Programm wie z. B. Softmatic Weblayers einen Screenshot einer Website machen und binden Sie diesen wie ein anderes Bild in die Präsentation ein.

Lösung #2

Wenn sie Ihre Website über https aufrufen können, so können Sie unter Einfügen -> Apps -> Store nach “Web Viewer” suchen und installieren. Das Einfügen funktioniert ganz intuitiv wie mit jedem anderen Element auch.

Lösung #3

Aktivieren Sie unter den Optionen -> Menüband anpassen die Entwicklertools. Nach dem Speichern der Einstellungen öffnen Sie diesen neuen Bereich und klicken dort auf Weitere Steuerelemente. Wählen Sie das Element Microsoft Web Browser und platzieren Sie es Ihren Bedürfnissen entsprechend. Doppelklicken Sie auf das Element, um den Code Editor aufzurufen. Ersetzen Sie den Code durch folgende Zeilen:
Private Sub WebBrowser1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
If URL = "" Then WebBrowser1.Navigate "http://www.genieblog.ch/"
End Sub

http://www.genieblog.ch/ müssen Sie durch die von Ihnen gewählte URL ersetzen. Damit sollte Ihr Frame funktionieren.
Hinweis: Wenn folgende Fehlermeldung kommt: “Dieses ActiveX-Steuerelement kann nicht eingefügt werden”, konsultieren Sie folgende Support-Seite: http://support.microsoft.com/kb/2793374/de