Wie eine Grafik plus Text darunter mittig (horizontal + vertikal) einfügen?

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    Unsere Datenschutzerklärung wurde aktualisiert. Mit der Nutzung unseres Forums akzeptierst Du unsere Datenschutzerklärung. Du bestätigst zudem, dass Du mindestens 16 Jahre alt bist.

    • Wie eine Grafik plus Text darunter mittig (horizontal + vertikal) einfügen?

      Hallo,

      ich möchte auf einer einzelnen HTML-Seite ein kleines Bild einfügen und darunter nach drei Leerzeilen (bzw. etwa der Höhe davon) auch noch eine Textzeile.
      Beides zusammen soll dann horizontal und auch vertikal mittig auf der Seite abgebildet werden, so als wäre alles zusammen nur eins. Wie muss ich das machen?

      Das Bild bekomme ich mittig plaziert. Ich habe es wie in dieser Anleitung gemacht (Beitrag #4):
      https://www.tutorials.de/threads/bild-vertikal-und-horizontal-mittig-ausrichten

      Doch wie bekomme ich jetzt noch den Text darunter?
      Wenn ich einfach einen unter dier IMG-Zeile im body einfüge, wird der in der Seitenansicht dann oben links angezeigt...


      Grüße
      Skippy
      .
      PC & Notebook: Windows 10 Pro (64 Bit) mit MS Office Standard 2019
      Notebook: Asus VivoBook Pro 17 N705FD-GC014T
      Browser: Firefox, Chrome
      WLAN-Router: Fritz!Box 7590
      Smartphone: Samsung Galaxy S7 edge (Android 8)
    • Aus Urschleimzeiten (HTML 4.0) stammt meine Tabellenlösung. Natürlich veraltet, bei mir hat´s damals aber geklappt.

      Quellcode

      1. <! DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.0/EN">
      2. <HTML>
      3. <!-- Kommentare -->
      4. <HEAD>
      5. <TITLE>MEINE BASIS-SEITE</TITLE>
      6. <BODY BGCOLOR="azure">
      7. <TABLE width=100% height=100%>
      8. <tr>
      9. <td width=33% height=15%><center> </center></td>
      10. <td width=33% height=33%><center>
      11. <H2 align="center"><br>WILLKOMMEN</H2>
      12. <!--H3 align="center"><I>Schön, daß Sie reinschauen!</I></H3-->
      13. <!--H4 align="center">Das ist dann der erste Fließtext.<BR>
      14. Das geht eine ganze Weile so weiter.</H4-->
      15. </center></td>
      16. <td><center> </center></td>
      17. </tr>
      18. <tr>
      19. <td><center> </center></td>
      20. <td><center>
      21. <img src="bild.gif"><br><br>Selbstportrait</img></center>
      22. </center>
      23. </th>
      24. <td><center> </center></td>
      25. </tr>
      26. <tr>
      27. <td><center> </center></td>
      28. <td><center> </center></td>
      29. <td><H5 align="right"><a href="https://www.google.de/">Impressum</a>
      30. </H5>
      31. </td>
      32. </tr>
      33. </TABLE>
      34. </BODY>
      35. </HEAD>
      36. </HTML>
      Alles anzeigen
      Wahrscheinlich geht das heute viel einfacher. Zum testen einfach irgend ein kleines Bild nehmen!
    • Auch wenn es nun wohl veraltet ist, hat es mir jetzt doch schon mal geholfen. Danke!
      Es wird im Editor zwar einiges mit grünen Wellenlinien unterstrichen, aber auf der Ansicht der Webseite wird es normal angezeigt.
      Eine aktuellere Methode werden Browser allerdinggs bestimmt trotzdem lieber mögen...

      Weißt du vielleicht noch, wie man den eingefügten Text in einer bestimmten Schriftart/Font und Größe darstellen kann?
      Vorerst würde mir das simple Verdana erst mal ausreichen.

      Ich habe verschiedene Varianten ausprobiert, aber die wurden nie akzeptiert.
      .
      PC & Notebook: Windows 10 Pro (64 Bit) mit MS Office Standard 2019
      Notebook: Asus VivoBook Pro 17 N705FD-GC014T
      Browser: Firefox, Chrome
      WLAN-Router: Fritz!Box 7590
      Smartphone: Samsung Galaxy S7 edge (Android 8)
    • Da ich damals mit Snippets gearbeitet habe (so vor 17 Jahren etwa), sah das dann so aus:

      HTML-Quellcode

      1. <html>
      2. <body>
      3. <!--- SNIPP -->
      4. <p style="font-family: Arial,Verdana; font-size:48; color:#FF0000">Andere Schriftart</p>
      5. <!--- SNIPP -->
      6. </body>
      7. </html>
      Wie gesagt, das geht heute bestimmt viel einfacher!
      Gruss

      P.S.: Aus dem bekannten SELFHTML wurde inzwischen ein WIKI: LINK

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von p. specht ()

    • Super, vielen Dank, damit hat es prima geklappt!
      Die Größenangabe der Schrift habe ich nur auf 1.3em geändert und nun sieht alles so aus, wie es soll. :-)
      .
      PC & Notebook: Windows 10 Pro (64 Bit) mit MS Office Standard 2019
      Notebook: Asus VivoBook Pro 17 N705FD-GC014T
      Browser: Firefox, Chrome
      WLAN-Router: Fritz!Box 7590
      Smartphone: Samsung Galaxy S7 edge (Android 8)
    • Danke für die Links!
      Ich werde mir die Anleitungen morgen mal genauer ansehen. :-)
      .
      PC & Notebook: Windows 10 Pro (64 Bit) mit MS Office Standard 2019
      Notebook: Asus VivoBook Pro 17 N705FD-GC014T
      Browser: Firefox, Chrome
      WLAN-Router: Fritz!Box 7590
      Smartphone: Samsung Galaxy S7 edge (Android 8)