Wie ein Text neben einem Bild setzten bei VS Code mit Html?

Hi. Ich möchte mir eine Webseite erstellen und bin dran und ha noch mein eigenes Logo gestaltet für meine Webseite. Ich hab mein Logo schon in die Webseite gesetzt wo ich sie haben möchte aber neben dem Bild möchte ich auch noch den Titel haben.

Und wie kann ich den Titel bei Html neben den Text setzen?

Answer 1

[regex9]

So kann es gehen:

<div>
  <img alt src="path/to/logo.png">
  <span>Some text</span>
</div>

Wenn du stattdessen ein Blockelement (wie h1, o.ä.) einsetzen möchtest, ändere dessen display-Property (CSS):

display: inline;

Um den Text relativ zum Bild vertikal auszurichten, könntest du dem Bild einen CSS-Style zuordnen.

.logo { vertical-align: middle }

Auf dem img-Element wird dafür noch ein class-Attribut gesetzt.

<img alt class="logo" src="path/to/logo.png">

Comments

[1Ella1]

Um CSS in die Html Datei hinzufügen musste ich dich die plug ins dafür installieren oder geht das auch ohne? Ich hab Gestern Abend etwas herum experimentieren und fand den Fehler nicht warum ich div und ein paar andere Sachen nicht einfügen so, dass es auch an nahm.

Und irgendwie ha ich das Gefühl das dass programmieren süchtig macht ^^ etwas man könnte stundenlang sich damit beschäftigen.

[regex9]

@1Ella1

Schau hier: Stylesheets einbinden.

[1Ella1]

Sollte ich in dieser Änderung auch das Logo oben beim Titel ändern? Weisst du was ich meine?

[regex9]

@1Ella1

Nein, ich weiß nicht, was du meinst.

Ein img-Element selbst hat zwar eine eigene feste Größe (kann also z.B. nicht mittendrin umbrechen), ordnet sich aber ebenso in den normalen Textfluss ein. Um also Text neben ihm (horizontal) zu platzieren, braucht es keiner speziellen CSS-Styles o.ä., es sei denn, es nimmt zu viel Breite in seinem Elternelement ein.