Diese Seite beeinhaltet Kode zum kopieren.
Auf einem kleinem Browser sieht das nicht gut aus,
mach doch bitte mal deinen Desktop an !

Elemente zentrieren, Div’s zentrieren, Bilder zentrieren

Video: 720p (HD) Deutsch, von Website-Bauen.de
Wie üblich, würden wir uns auf Ihr "like" bei YouTube freuen - Danke

Das HTML und CSS dazu, wie im Video:

HTML Code:
Wie im Video-Beispiel mit vier div-Elementen nebeneinander,
es könnten natürlich mehr oder weniger sein, denn sie verlaufen inline.

<h1>4 Elemente zentrieren:</h1>
<div class="aussenrum">
   <div class="das-Element">Inhalt</div>
   <div class="das-Element">Inhalt</div>
   <div class="das-Element">Inhalt</div>
   <div class="das-Element">Inhalt</div>
</div>


CSS Code:
Setze eigene Werte bei Höhe, Breite, margin und padding ein um es auf dein Website abzustimen.
inline-styling sollte man vermeiden, dazu gibt es ein CSS-stylesheet.

<style>
.das-Element {
    display: inline-block;
    height: 100px;
    width: 200px;
    margin: 6px;
    padding: 6px;
    background: #2efef7;
    text-align: left; /* OPTIONAL, um Text wieder von links zu richten */
}
.aussenrum {
    text-align: center;
    margin: 6px;
    padding: 0;
    background: #fea756;
}
</style>



Ähnliches Thema: Button Styling mit CSS-3 ohne jegliches Bildmaterial dafür einzusetzen.

Webhosting kostenlos testen, Hompage online

Tipps für Ihre eigene Webseite

Tipps für jeden Webmaster

Viele Tipps die jeder Webmaster beachten sollte um seinen Internetauftritt zu verbessern. Folgen Sie diesen vorteilhaften Tipps beim Erstellen Ihrer eigenen Website. Mehr lesen »

Responsive Webseiten

Webseiten die sich jeder Browser-Breite anpassen, ist für eine Webseite heute Voraussetzung. Die Zahl der Benutzer von Smartphones steigt täglich.  Mehr lesen »

Brauchen Sie “Nachhilfe”?

Wir bieten Schulung für HTML, CSS und Administration Ihrer Website an. 1zu1 Kurse über Fernhilfe, wobei wir genauestens auf Ihr Anliegen eingehen.  Mehr lesen »

Weitere Artikel für den Internetauftritt »