blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

Bilder horizontal und vertikal zentriert ausrichten

15. Juli 2011 |  WEBDESIGN0 Kommentare

Wer eine Bildergalerie erstellt stand sicher auch schon mal vor dem Problem, dass bei einer Umsetzung ohne Tabelle die Bilder nicht einfach horizontal und vertikal zentriert werden können. Hier eine Lösung für dieses Problem:

Bilder horizontal und vertial zentriert ausrichten

Stylesheet

<style type="text/css">
 .imageholder {
    float: left;
    margin: 5px;
    position:relative;
    display:table;
    height: 200px;
    width: 200px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #CCCCCC;
    text-align:center;
 }
 .inner {
    width:100%;
    display:table-cell;
    vertical-align:middle;
    position:relative;
    text-align:center;
 }
 .inner img{
    display:inline;
    vertical-align:middle;
 }
</style>
<!--[if lt IE 8]>
<style type="text/css">
 .imageholder{overflow:hidden}
 .imageholder,.inner{display:block}
 .inner {top:50%;left:0;}
 .inner img{top:-50%; position:relative;display:block}
 </style>
 <![endif] -->

HTML-Code

<div class="imageholder">
    <div class="inner">
        <img src="bild1.jpg" alt="Img" width="180" height="135" />
    </div>
</div>
<div class="imageholder">
    <div class="inner">
        <img src="bild2.jpg" alt="Img" width="135" height="180" />
    </div>
</div>
<div class="imageholder">
    <div class="inner">
        <img src="bild3.jpg" alt="Img" width="100" height="150" />
    </div>
</div>
<div class="imageholder">
    <div class="inner">
        <img src="bild4.jpg" alt="Img" width="180" height="100" />
    </div>
</div>

Über den Autor:

Lukas Blatter

bloggt und twittert seit 2009 aus Leidenschaft diverse Themen rund um Webdesign, PHP, TYPO3, CMS Made Simple, Computer und weiteres.

Er ist Gründer und Inhaber von blattertech informatik, Ehemann und Vater einer Kinderschar.

Kommentare

Zurzeit gibt es keine Kommentare zu diesem Artikel.


Auf Grund des hohen Spamaufkommens können zu diesem Beitrag keine Kommentare mehr abgegeben werden