Text verticale Ausrichtung
Hallo und guten Morgen,
seit einiger Zeit versuche ich mich in CSS mit mässigem Erfolg. Da fehlt wohl noch Verständnis und Übung. Aber jetzt bin ich in Rente, da habe ich mehr Zeit. Ich habe auch so meine Probleme mit dem verticalen Ausrichten von Text in einem DIV-Element. HTML-Code und CSS hänge ich hinten an. Ist eigentlich nichts besonderes. Ich habe einen Container mit zwei linksfloaten Divs. Im linken Div ist ein Bild und im rechten einen Text. Mir geht es um diesen Text. Ich hätte den gerne genau in der verticalen Mitte. Egal was ich anstelle, der bewegt sich kein Pixelchen. Deshalb die Frage an die Experten, ob ich verzweifelt aufgeben muss, oder ob es doch irgendwie geht, diesen Text zu bewegen. Der Code: <style type="text/css"> body { margin: 0px; padding: 0px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; } p { color: #787070; } #container { margin-right: auto; margin-left: auto; margin-top: 10px; width:940px; height: auto; background:#fff; } .eins { width:41px; height: 60px; background:#fff; float:left; margin: 1px 3px 0px 0px; border: 1px dashed black; } .zwei { width:220px; height: 60px; background:#fff; float:left; margin: 1px 3px 0px 0px; border: 1px dashed black; } } </style> </head> <body> <div id="container"> <div class="eins"><img src="dieburg.gif"> </div> <div class="zwei"><p>Das ist der TEXT</p></div> </div> </body> MFG HR |
Zitat:
Hallo, Gib den beiden DIVs 'display: table-cell' und 'vertical-align: middle' |
Zitat:
Ich habe jetzt folgendes getan: .eins { width:41px; height: 60px; background:#fff; float:left; margin: 1px 3px 0px 0px; border: 1px dashed black; display: table-cell; vertical-align: middle; } .zwei { width:220px; height: 60px; background:#fff; float:left; margin: 1px 3px 0px 0px; border: 1px dashed black; display: table-cell; vertical-align: middle; } War das so gemeint? Aber da tut sich nix. Gar nix! Leider. |
Das 'float' kommt weg, das hatte ich vergessen zu sagen. :-/
|
Zitat:
Eines habe ich am Anfang verschwiegen, dass ich sechs DIV´s nebeneinander habe, nicht nur zwei. Hätte ich wohl gleich angeben sollen. Das hielt ich aber für nicht so wichtig. Habe mich da wohl getäuscht. Wie denn das dann mit dem float aus? MfG Hans Rohmann |
Zitat:
mit 'float: left' oder 'float:right' oder mit 'display: inline' oder mit 'display: inline-block' oder mit 'display: table-cell' Was bei dir in frage kommt, hängt von dem gewünschten Layout ab. Bitte lade deine Problemdatei (bei einem Freehoster) hoch, und poste dann den Link. Grüße gaby |
Zitat:
|
wenn du noch keinen eigenen Hoster hast, nimmst halt einen Freehoster:
Free Hosting bplaced - Webspace & Webhosting // 2GB Freehost :: The place for your webspace zumindest diese beiden sind werbefrei |
Zitat:
http://hrohmann.alfahosting.org/test.html Die mit "eins" bezeichneten DIVs bekommen immer eine Grafik. Die beiden anderen nur Text bzw. einen Link. Da fällt mir noch ein, dass ich ja diese "Tabelle" als Tabelle unter Sepulcretum-Friedhof schon habe. Ich möchte aber keine Tabelle mer haben, sondern alles mit DIVs. |
dein html gibt keinen Sinn (Semantik). Einfach nur div statt table haben zu wollen ist Unsinn. In welchem Zusammenhang stehen denn 1, 2 und 3? Was ist/heisst z.B.:
Code:
Dieburg • D • Juli 2013 ein Vorschlag zum html, der Rest in css ist einfach: HTML-Code:
<dl> |
Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023