Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild in <td> ausrichten

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild in <td> ausrichten

    Hallo zusammen,

    ich habe ein Problem bei der Gestaltung meiner Tabelle.
    Und zwar soll in einer der Zellen ein Bild sein. Und nur das.
    Es soll sowohl vertikal als auch horizontal in der Zelle zentriert werden (so wie der Text in den anderen Zellen auch).

    CSS-Datei:
    Code:
    td {
    	text-align: center;
    	vertical-align: middle;
    }
    Der Text wird auch schön zentriert, nur das Bild klebt unter dem oberen Rand der Zelle und mag da nicht wegkommen.
    Muss ich dafür noch etwas anderes definieren?
    Ich habe es auch schon mit
    Code:
    td img{
    	text-align: center;
    	vertical-align: middle;
    }
    versucht, was leider auch nichts gebracht hat.

    Jemand eine Idee?

    [edit]
    Direkt in den IMG tag
    Code:
    style='vertical-align:middle'
    oder
    Code:
    style='vertical-align:middle; display:table-cell;'
    hineinzuschreiben hat auch nichts gebracht.
    Übrigens:
    Code:
    vertical-align:bottom
    hat ebenfalls keinen Effekt.
    Und bevor die Frage kommt: Das Bild ist exakt quadratisch (20x20) und die Zelle hat laut Chrome die Ausmaße 24x40. Das Bild klebt mittig (immerhin!) oben unterm Balken mit einem kleinen Abstand von 2px.

  • #2
    Du musst beides Ausrichten:

    td, td * { vertical-align:... }
    [I]You know, my wife sometimes looks at me strangely. „Duncan“, she says, „there's more to life than Solaris“. Frankly, it's like she speaks another language. I mean, the words make sense individually, but put them together and it's complete nonsense.[/I]

    Kommentar


    • #3
      Mit td, td * gab es um das Bild einen zusätzlichen Rahmen.
      Ich habe es mal getrennt versucht, um das "border" rauszuwerfen.
      Der Rahmen ist weg, aber das Bild weiterhin nicht vertikal zentriert.

      Code:
      td {
      	border: 1px solid #FFFFFF;
      	text-align: center;
      	vertical-align: middle;
      }
      
      td * {
      	text-align: center;
      	vertical-align: middle;
      }
      Hier mal der Code wo das Bild verwendet werden soll:
      PHP-Code:
      echo "<td><form action=".htmlentities($_SERVER['PHP_SELF'])." method='POST'><input type='hidden' name ='delete' value='deletemailbox'><input type='hidden' name ='deleteboxname' value='".$row{'boxname'}."'><input type='image' src='delete.png' alt='".$GLOBALS["text_delete"]."' style='vertical-align:middle; display:table-cell';></form></td>"
      Und so sieht das Ganze aus.

      Kommentar


      • #4
        Irgendwo musst du den Wert vorher schon definiert haben, denn standarmäßig sollte das vertikal zentriert angezeigt werden

        Code:
        <!DOCTYPE html>
        <html>
        <head>
        	<style>
        		* {
        			border:1px solid red;
        		}
        		table {}
        		table tr {}
        		table tr td { height:100px; }
        		table tr td * { vertical-align:middle; }
        		table tr td form {}
        		table tr td form input {}
        		table tr td form img {}
        	</style>
        </head>
        <body>
        	<table>
        		<tr>
        			<td><form action="del" method='POST'><input type='image' src='delete.png' alt='del'></form></td>
        		</tr>
        	</table>
        </body>
        </html>
        [I]You know, my wife sometimes looks at me strangely. „Duncan“, she says, „there's more to life than Solaris“. Frankly, it's like she speaks another language. I mean, the words make sense individually, but put them together and it's complete nonsense.[/I]

        Kommentar


        • #5
          Laut der Entwickleransicht wird der Tag ja auch gezogen ... nur dargestellt wird er nicht.
          Ich habe auch im FF mal getestet, wie die Darstellung ist: Auch da gibt es den Freiraum unter dem Bild. Kurioser Weise gibt es im FF noch ein weiteres Problem. Und zwar fehlt der Rahmen um das danebenliegende Feld.



          Im IE hingegen sieht alles sotal richtig aus. Durch den fehlenden Freiraum unter dem Bild ist die Zeile auch deutlich schmaler.



          Die Frage ist, wie man das jetzt so hinbekommen kann, dass es überall so aussieht wie im IE -.-

          Kommentar


          • #6
            Dann musst du das mal zeigen.
            [I]You know, my wife sometimes looks at me strangely. „Duncan“, she says, „there's more to life than Solaris“. Frankly, it's like she speaks another language. I mean, the words make sense individually, but put them together and it's complete nonsense.[/I]

            Kommentar


            • #7
              Zeig uns mal bitte den kompletten HTML Code

              mit

              PHP-Code:
              td {
                  
              text-aligncenter;
                  
              vertical-alignmiddle;

              Sagst du ja schon, dass alle Inhalte in der Spalte mittig ausgerichtet werden sollen daher ist sowas wie td img unrelevant.

              Kommentar


              • #8
                Ich habe den Code jetzt mal bei Github hochgeladen.

                Der php-Code des Buttons steht in der trashmailer.php in Zeile 149, das CSS in der (Überraschung) style.css.
                Ich denke, so kann man das am besten einsehen

                P.S. Github ist für Einsteiger irgendwie kompliziert xD

                Kommentar

                Lädt...
                X