Wie lege ich Text unter ein Bild mit CSS?

-1

Ich möchte Text unter einem Bild platzieren. Ich möchte dies für 4 Bilder machen, die in einer Reihe angeordnet sind.Wie lege ich Text unter ein Bild mit CSS?

Ich habe versucht, eine Lösung implementieren, hier ist der Code, den ich geschrieben habe: http://pastebin.com/3rgYXKFL

Hier ist, was dieser Code erzeugt: http://i.imgur.com/hWwWMlL.png

Obwohl dies ein Schritt in die richtige Richtung ist, ich bin immer noch nicht in der Lage, genau herauszufinden, wie man den Text unter das Bild bringt, und platziere 4 Bilder in einer Reihe (jeweils mit Text unter dem Bild). Irgendwelche Vorschläge, wie man das löst?

Quelle

2016-10-04 Ryan

Hallo @Ryan, bitte poste ein minimales, komplettes und überprüfbares Beispiel - http://Stackoverflow.com/help/mcve –

Kannst du den Code, den du verwendest, in einen Codepen oder Ähnliches legen, damit wir sehen können was? Du verwendest und gibst hoffentlich eine Antwort :) – SomeGuy

Höhe und Gewicht sind besser als CSS-Attribute, würde ich sie in einer style="" definieren. Also height="176" und weight="201" sollte style="height: 176px; width:201px" werden.

Sofern es keinen bestimmten Grund für die Verwendung von Inline-Stilen gibt, würde ich auch vorschlagen, dass Sie alle Ihre Stile in eine CSS-Datei einfügen.

Sie könnten alle Ihre Bilder <img src="url" class="icon"> und dann in CSS machen:

.icon { 
    height: 176px; 
    width: 201px; 
}

Auf diese Weise der einzige Teil ist etwas die Klasse Sie wiederholen, anstatt die Art jedes Mal zu setzen. Wenn Sie etwas ändern möchten, ist es viel einfacher, die Änderung an einer Stelle vorzunehmen als an allen vier Bildern.

Quelle

2016-10-04 01:01:15 khopsickle

Ihre Frage war nicht klar, also ist dies die beste Antwort, die ich Ihnen in diesem Moment geben kann. Verwenden Sie diesen Code und es könnte sein, was Sie wollen.

<img src="images/modules/Logomakr_1dOe2g.png" width="201px" height="198px"/> 
<br /> 
<p style="font-size:36px; margin-left:2.5%; margin-top:0; margin-bottom:0;">Engineering</p> 
<p style="font-size:24px; margin-top:0;">Text Goes Here</p> 
<br /> 
<br /> 
<img src="images/modules/Logomakr_2VsRmD.png" width="201px" height="198px"/> 
<p style="font-size:36px; margin-left:2.5%; margin-top:0; margin-bottom:0;">Buisness</p> 
<p style="font-size:24px; margin-top:0;">Text Goes Here</p>

Ein Vorschlag wäre, Ihre HTML-Codierung bitte lernen, bevor Fragen wie diese Frage zu stellen, weil Ihr Code viele schwerwiegende Fehler enthalten und schien wie Sie HTML fast völlig neu sind und nicht wissen, was Sie taten.

Quelle

2016-10-04 01:14:34 Ahm23

Es ist wichtig zu verstehen, dass viele Leute, die diese Seite besuchen, bei dem Thema neu sind. – hoss

Wie lege ich Text unter ein Bild mit CSS?

Antwort

Verwandte Themen