I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
5 Answers 5
Some text
If you know the width of your image, your CSS:
.img-with-text < text-align: justify; width: [width of img]; >.img-with-text img
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
If you would float the div itself to the left or right you do not need to set the width and the content is still centered. Html/css should center automatically according to the biggest component and not to the full-width.
and to get the image width, a couple of approaches: stackoverflow.com/a/5633302/227926 and stackoverflow.com/a/623174/227926 In turn these need the image source path, how to get that, here: stackoverflow.com/a/2765186/227926
how do you position the image using this format? when i set position:absolute so that I can put the image where I want to, the text just hides behind the image.
this is because you’re pulling the image out of the document flow by setting position:absolute , meaning the text has no concept of the image. you’re better off positioning the image using margins or padding or even position:relative
If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline) What I’m attempting to do is this (with some space between the images):
[image1] [image2] [image3] [text] [text] [text]
I haven’t given the images their own individual class names because the images don’t align horizontally to one another.
7 Answers 7
Add a container div for the image and the caption:
Text below the image
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
Text below the image
Text below the image
An even longer text below the image which should take up multiple lines.
Text below the image
Text below the image
An even longer text below the image which should take up multiple lines.
Updated answer
Instead of using ‘anonymous’ div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
Text below the image
Text below the imageText below the imageAn even longer text below the image which should take up multiple lines.Text below the imageText below the imageAn even longer text below the image which should take up multiple lines.
@ceejayoz not to mention all the   as opposed to say setting a margin, or using other css layout tools.
While this has essentially been answered, the only way I’ve found to get a caption to fit an inline image’s width is to hard-code the width property on a wrapper or the caption itself.
@McGarnagle do not edit code meaning in other people’s posts. Formating is OK (well unless it’s python), but all code contents are important! Thanks to your edit, jxworkmans post looked meaningless. And really, fixing wrong code in question is complete nonsense. What would be the point of answers then?
Those tags do not help in any way. They are just dummy markup, and you need to do all the work in CSS (and/or with other HTML tags). And you need an extra operation to make old versions of IE to recognize them even as dummy tags. So it is simpler to use div or span .
The problem is this: [figures] can be moved to another page or to an appendix without affecting the main flow .
and aren’t general-purpose replacements for images with captions. They only apply to figures. If you (for example) have a step-by-step how-to that is composed of paragraphs intermixed with captioned photos, it may be important that the images are presented at the same paragraph breaks as defined in the html. Hence would not be applicable here (as I understand).
I’d add that these lines do not necessarily place a figure caption under an image. The HTML given here describes the content, but the appearance is affected/determined by CSS.
I have put the images in the correct way but i am stuck adding the text below the image. I have also added bootstrap. Any suggestions how to do it would be helpful. Thank you in advance.
Take a look at bootstrap and how it works ( if you say you want to use bootstrap. You can use flexbox without bootstrap too ) . Add both img and text in a column. Do not use stuff like ` margin-left: 364px;` . Use percentages or viewport units. If you want to have a nice responsive website. Check : ‘ responsive design patterns ‘ on the web. You have a bit of work to do to read some documentation and understand some concepts. But it will help you a lot in the future. Good luck
Yes, you can avoid . You can position them in a different way. Consider you have a screen of 700px width. How will margin-left: 364px; work there ? Not mentioning mobile devices.
How to put text over images in HTML. Everytime I enter the below code, the text goes under the image.
That is improper HTML; img is a self-closing tag, as so: (equivalently, in XHTML: ).
5 Answers 5
You can create a div with the exact same size as the image.
use the css background-image property to show the image
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
You need to use absolutely-positioned CSS over a relatively-positioned img tag. The article Text Blocks Over Image gives a step-by-step example for placing text over an image.
The element is empty — it doesn’t have an end tag.
If the image is a background image, use CSS. If it is a content image, then set position: relative on a container, then absolutely position the image and/or text within it.
Text you want to display over the image
Using absolute as position is not responsive + mobile friendly. I would suggest using a div with a background-image and then placing text in the div will place text over the image. Depending on your html, you might need to use height with vh value
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
this is an image of what i have done so far: 
and this is my code:
