zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div zentrieren mit Float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.02.2014, 17:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2013
Beiträge: 5
pulsator.pilz befindet sich auf einem aufstrebenden Ast
Standard Div zentrieren mit Float

Hallo, das Div "text" soll vertikal neben dem Bild angezeigt werden. Das
Bild benutzt dazu float, allerdings funktioniert das vertikale Ausrichten nicht:

Code:
<html>
  <head>
   <style type="text/css">
#gesamt{
  width:300px;
  height:100px;
  background-color:lightgrey;
}

#bild{
  width:64px;
  height:64px;
  float:left;
}

#bild img{
  width:100%;
  height:auto;
}
#text {
  vertical-align:middle;
  margin:0 auto;
}
   </style>
 </head>
 <body>
     <div id="gesamt">
         <div id="bild"><img src="test.png"/></div>
         <div id="text">Beispieltext</div>
     </div>
  </body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.02.2014, 18:12
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

Code:
#text {
	float: left;
	line-height: 64px;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.02.2014, 19:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2013
Beiträge: 5
pulsator.pilz befindet sich auf einem aufstrebenden Ast
Standard

Habe wahrscheinlich mein eigentliches Problem etwas schlecht formuliert, in diesem Beispiel funktioniert das zwar,
aber ich benötige es für eine Seite auf der der #gesamt Div sozusagen eine dynamische Größe hat (ist immer unterschiedlich).

Das Div muss also wirklich zentriert werden (ohne Pixel-Angaben).
Mit Zitat antworten
  #4 (permalink)  
Alt 20.02.2014, 19:51
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

Ich dachte, du willst den Text neben dem Bild vertikal zentrieren? Was hat das mit dem #gesamt div zu tun?

anderes Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.wrap {
		background: #ccc;
		height: 150px;
		padding: 1em;
		float: left;
	}
	.wrap img, .wrap p {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		float: left;
	}
	.wrap p {
		margin-left: 1em;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<img src="http://placehold.it/64x64/0eafff/ffffff.png" alt="">
		<p>Beispieltext</p>
	</div>
</body>
</html>

Geändert von Manfred62 (20.02.2014 um 20:07 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2014, 09:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

so was? Scriptly: Bilder horizontal und vertikal zentrieren | Bad Langensalza
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
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
Bilder im div mit float positionieren henmey CSS 4 25.01.2009 02:53
div & float & Breitenanpassung - unschönes Überlagern nyo CSS 2 12.11.2008 13:36
Problem mit div (float) Sp33dy G0nz4l3s CSS 2 29.05.2006 20:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:17 Uhr.