Forenindex » Web allgemein » HTML und CSS / Stylesheets » vertical-align: middle / margin : auto

vertical-align: middle / margin : auto

jrandi
Beiträge gesamt: 794

19. Jul 2011, 16:01
Bewertung:

gelesen: 1522

Beitrag als Lesezeichen
Hallo,

wie bringe ich das Bild vertikal in die Mitte ?

http://www.bw1.ch/projekte.php?action=detail&id=91&id_foto=346&rub=neubauten

meistens nimmt das Bild die ganze Höhe ein, aber nicht immer, wie beispiel der URL oben. . .

mit margin und vertical-align nix zu machen ?

#content_img {
width: 570px;
position: relative;
margin: auto;
height: 380px;
float: left;
display: block;
text-align: left;
vertical-align: middle;
background-color:#FFF;
}

für tipps und tricks danke ich bestens, gruss
jurg

___________________________________________________

net & print production : www.randj.net / www.alpha-randj.net

vertical-align: middle / margin : auto

jrandi
Beiträge gesamt: 794

20. Jul 2011, 18:55
Bewertung:

gelesen: 1481

Beitrag als Lesezeichen
Hallo,

für alle dies interessiert. . . mit CSS alleine geht da wohl nix, oder irre ich mich ? lasse mich gerne belehren. . . !

habe es jetzt so gelöst :
. sql-query // um foto zu ermitteln
. $file_gr=PATH_UPLOAD.$foto2;
// ausgewähltes photo
. $size = getimagesize($_SERVER["DOCUMENT_ROOT"].$file_gr);
// grösse ausgewähltes photo definieren
. $hauteur = (380 - $size[1]) / 2;
// 380 ist fixe grösse vom container / size[1] = höhe foto -> durch 2 teilen
. $tpl->MxText("img_pos","<style type=\"text/css\"> #img_pos {margin-top: ".$hauteur."px; } </style>"); // parameter in HTML-TPL einzutragen (modeliXe, funktioniert ähnlich oder wohl sogar besser in Smary)

zusammengefasst :
PHP: imgSize zurückholen, distanz ausrechnen und die variablen dann in die HTML-Templates übertragen wo ein CSS-Style eingebunden werden muss (meine CSS sind zwar nur extern, aber eben, da muss man halt mal ne ausnahme machen, denn php-variablen in css-files verträgt sich anscheinend nicht . . . oder ?)

vielleicht habe ich das etwas kompliziert gemacht, wenn's einfacher geht,
bin stets dankbar für Eure tipps & tricks !

thx & gruss
jurg

___________________________________________________

net & print production : www.randj.net / www.alpha-randj.net