Vertikale Zentrierung eines Bildes zwischen zwei Linien
0 
Felix Riesterer
0 0 Felix Riesterer
0 0 Felix Riesterer
0 0 Felix Riesterer
0 0
Vertikale Zentrierung eines Bildes zwischen zwei Linien
Hallo,
ich hatte einen Button zwischen zwei Linien (<hr>) gesetzt und war überrascht wie unterschiedlich dies in den einzelnen Browsern aussah, richtig zentriert war es bei keinem.
Um der Sache näher zu kommen, habe ich versucht, ein Bild genau bündig zwischen die Linien zu bekommen.
Als letztes habe ich alles was mir einfiel an margin und padding auf 0 gesetzt. Trotzdem ist das Bild in keinem Browser genau bündig an den Trennlinien und darüber hinaus die unterschiedlichsten Abstände.
Wie kann ich erreichen, dass das Bild zumindest in den verbreitesten Browsern
zwischen den Linien zentriert ist?
Hier der letzte Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Test</title>
</head>
<body style="background-color:gray">
<p>Test</p>
<hr style="margin-bottom:0;padding-bottom:0;" >
<form style="margin-top:0;padding-top:0;margin-bottom:0;padding-bottom:0;" action="http://www.example.test/cgi/index.pl" method="post" >
<input type="image" src="/bilder/d.gif">
</form>
<hr style="margin-top:0;padding-top:0;" >
</body>
</html>
Die Seite kann angezeigt werden unter frei4dich.de.
Schönen Gruß
Wolfgang
-
Lieber Wolfgang,
Als letztes habe ich alles was mir einfiel an margin und padding auf 0 gesetzt.
nein, nicht alles:
<input type="image" src="/bilder/d.gif">
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
nein, nicht alles:
»» <input type="image" src="/bilder/d.gif">Meintest Du
style="margin-top:0;padding-top:0;margin-bottom:0;padding-bottom:0;"
auch im input-Tag?
Das bewirkt keine Änderung.
Gruß
Wolfgang-
Lieber Wolfgang,
ich habe mir Dein Testbeispiel etwas genauer angesehen. Das <input>-Element braucht aus struktureller Sicht ein Blockelement, innerhalb dessen es stehen kann (das <form>-Element gilt nicht), z.B. einen Textabsatz. Die tatsächliche Höhe dieses Textabsatzes ist dann ausschlaggebend, ob unterhalb des Bildes noch ein Abstand ist, oder nicht.
In meinem Gegenbeispiel habe ich die <hr>-Elemente entfernt. Dafür habe ich dem <form>-Element einen oberen und unteren Rahmen geben, um das visuell Wesentliche sichtbar zu machen.
Außerdem habe ich diese grässlichen inline-Styles durch ein kleines Stylesheet im <head> Deines Beispiels ersetzt. Das lässt sich dann später besser in eine externe CSS-Datei auslagern...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Test</title> <style type="text/css">body { background-color:gray; } form, form p, input { margin: 0 auto; padding: 0; } form { border-top: 1px solid white; border-bottom: 1px solid black; } form p { height: 27px; }</style> </head> <body> <p>Test</p> <form action="http://www.example.test/cgi/index.pl" method="post"> <p><input type="image" src="/bilder/d.gif"></p> </form> <p>Test</p> </body> </html>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
ich bedanke mich ganz herzlich für Deine Mühe.
Das sieht ja jetzt gut aus!
Viele Grüße
wolfgang-
Lieber Wolfgang,
ich bedanke mich ganz herzlich für Deine Mühe.
gern geschehen. Was hast Du dabei gelernt...?
Das sieht ja jetzt gut aus!
Das finde ich absolut nicht... aber die Geschmäcker sind nunmal verschieden.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
gern geschehen. Was hast Du dabei gelernt...?
Ja!
»» Das sieht ja jetzt gut aus!
Das finde ich absolut nicht... aber die Geschmäcker sind nunmal verschieden.
Ich meinte nicht die vielleicht von Dir kurzfristig gesehene grasgrüne Seite sondern das Ergebnis Deines Beispiels!
Schönen Abend!-
Lieber Wolfgang,
| gern geschehen. Was hast Du dabei gelernt...?
|
Ja!Wunderbär. Richtige Antwort! Du darfst Dir jetzt Deinen Keks nehmen. ;-P
| »» Das sieht ja jetzt gut aus!
|
| Das finde ich absolut nicht... aber die Geschmäcker sind nunmal verschieden.Ich meinte nicht die vielleicht von Dir kurzfristig gesehene grasgrüne Seite sondern das Ergebnis Deines Beispiels!
Ich meinte auch nicht meine Seite, sondern das Beispiel. Was hast Du eigentlich gegen meine grasgrüne Seite...??
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
Ich meinte auch nicht meine Seite, sondern das Beispiel. Was hast Du eigentlich gegen meine grasgrüne Seite...??
... und ich meinte nicht Deine Seite, die ich - pardon - zuvor noch gar nicht angesehen hatte, sondern meine (ebenfalls grün!), mit der ich Deine Änderungen getestet hatte, die ich aber bis zur endgültigen Fertigstellung wieder entfernt habe.
Schönen Sonntag
Wolfgang -
Lieber Felix,
ich hoffe Du liest dies noch.
In Deinem Beispiel steht u.a.form, form p, input { margin: 0 auto; padding: 0; }
Müsste da der Button nicht links/rechts zentriert sein, also in der Zeilenmitte stehen?
Falls nicht, wie erreiche ich die Zentrierung des Buttons?Viele Grüße,
Wolfgang
-
Lieber Wolfgang,
ich hoffe Du liest dies noch.
aber logo!
In Deinem Beispiel steht u.a.
form, form p, input { margin: 0 auto; padding: 0; }
Ja, diesen Code hatte ich verbrochen...
Müsste da der Button nicht links/rechts zentriert sein, also in der Zeilenmitte stehen?
Nein. Ein <input>-Element ist ein inline-Element, das standardmäßig mit
display:inlineversehen wird. Bei als inline formatierten Elementen hat margin nur sehr eingeschränkte Auswirkungen. Der Wert "auto" hat z.B. keine zentrierende Wirkung, da das Element ja nicht die komplette Zeile in Anspruch nimmt.Falls nicht, wie erreiche ich die Zentrierung des Buttons?
Indem Du seinem Elternelement die Eigenschaft
text-align:centerzuweist.Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
super Antwort, superschnelle Antwort.
Danke
Wolfgang
-
-
-
-
-
-
-
-
-