wake-up-neo.com

Wie platziere ich Text und ein Bild in HTML nebeneinander?

Ich möchte, dass der Text und das Bild nebeneinander liegen, aber ich möchte, dass das Bild ganz links auf dem Bildschirm und der Text ganz rechts auf dem Bildschirm angezeigt wird. Das habe ich momentan ....

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

Wie kann ich das machen?

Vielen Dank

htmlcssimagetext
21
user2426533
img {
    float:left;
}
h3 {
    float:right;
}

jsFiddle-Beispiel

Beachten Sie, dass Sie wahrscheinlich den Stil clear:both für Elemente verwenden möchten, die hinter dem von Ihnen angegebenen Code stehen, damit er nicht direkt unter den schwebenden Elementen nach oben rutscht.

26
j08691

Sie möchten css float verwenden, Sie können es direkt in Ihren Code einfügen.

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

Aber ich würde wirklich empfehlen, die Grundlagen von CSS zu lernen und all Ihr Styling in ein separates Stylesheet aufzuteilen und Klassen zu verwenden. Es wird Ihnen in Zukunft helfen. Ein guter Startpunkt ist w3schools oder vielleicht später den Pfad hinunter Mozzila Dev. Netzwerk (MDN) .

HTML:

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS:

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}
4
Dominic Green

Sie können vertikal ausrichten und schweben.

In den meisten Fällen möchten Sie vertikal ausrichten: in der Mitte das Bild.

Hier ist ein Test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

vertikal ausrichten: Basislinie | Länge | Sub | Super | Top | Text-Top | Mitte | Bottom | Text-Bottom | Initial | Vererbung;

In der Mitte lautet die Definition: Das Element wird in der Mitte des übergeordneten Elements platziert.

Sie können das also auf alle Elemente innerhalb des Elements anwenden.

0
Illuminati