zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild in div vertikal zentrieren.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.01.2013, 23:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.01.2013
Beiträge: 1
serum befindet sich auf einem aufstrebenden Ast
Standard Bild in div vertikal zentrieren.

Hallo zusammen,

ich habe ein Problem und finde einfach keine Lösung. Googlen und diverse Hilfeseiten haben mich nicht weiter gebracht. Ich bin absoluter Laie muss ich dazu sagen. Wäre super wenn mir jemand sagen kann, was da falsch ist.

Ich möchte eine Thumbnail-Übersicht aus Div-Boxen haben. Darin sollen Bilder (gleiche Breite, unterschiedliche Höhe) vertikal zentriert stehen. Und diese vertikale Zentrierung krieg ich nicht hin, die Bilder hängen alle oben auf der gleichen Höhe? Kann mir jemand sagen, wie ich das lösen kann? Wie gesagt, ich bin absoluter Laie.




Im Code sieht das bisher so aus:
Zitat:

<div id="thumbnails">

<div class="box">
bild + text</div>

<div class="box">
bild + text</div>

<div class="box">
bild + text</div>
</div>

Im CSS so:
Zitat:
#thumbnails {
position:relative;
top: 150px;
left: 50px;
border: 0;
margin: 0;
padding: 0;
width: auto;
height: auto;
}

.box {
float: left;
position: relative;
margin-right: 40px;
width: 280px;
height: 380px;
text-align: left;
vertical-align: middle;
}


Bin über jeden Vorschlag dankbar. Vielen Dank im Voraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2013, 12:10
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

um Elemente vertikal zu zentrieren, kannst du, wenn du auf feste Größenangaben verzichten möchtest, mit display:inline-block und vertical-align:middle arbeiten.

Hier zwei Beispiele dazu:
- Vertikale Zentrierung von Bildern
- Vertikale Zentrierung von div-Elementen

PS: Es wäre schön, wenn du das nächste Mal die HTML- bzw. CODE-Tags verwendest und deinen Versuch online zur Verfügung stellst - bspw. mit jsFiddle.

Mit freundlichen Grüßen,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2013, 12:11
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

schau dir mal dieses Beispiel an. Auf dieser Seite sind noch andere Varianten.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
div dynamisch zentrieren amateur23 CSS 11 13.10.2006 13:02
Text im Div vertikal zentrieren? Evil_Zangief CSS 5 23.08.2006 14:42
Bild vertikal zentrieren in div just2b CSS 4 18.08.2006 10:16
Bild horizontal und vertikal zentrieren Anonymous CSS 10 18.06.2003 12:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:50 Uhr.