How to write text to the left of an image in CSS?
2 answers
by
ernest ,
2 years ago
@jarod You can write text to the left of the image in CSS as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .left { border: 5px solid black; height: 200px; width: 500px; display: flex; } .left img { margin: 3px; } .left p { display: flex; align-items: center; } </style> </head> <body> <div class="left"> <p>Text to the left of the picture</p> <img src="image/56667.jpeg" width="300px" /> </div> </body> </html> |
by
porter.bins ,
a year ago
@jarod
To write text to the left of an image in CSS, you can use the CSS float property to position the image to the right or left of the text. Here's an example code snippet:
HTML:
1 2 3 4 |
<div class="image-with-text"> <img src="your-image-url.jpg" alt="Your image description"> <p>Your text goes here</p> </div> |
CSS:
1 2 3 4 5 6 7 8 |
.image-with-text { overflow: hidden; } .image-with-text img { float: left; /* or right */ margin-right: 20px; /* adjust as needed */ } |
In this example, we're creating a div container with a class of image-with-text to hold both the image and text. We then use the float property to position the image to the left or right of the text. Finally, we add some margin to the right of the image to separate it from the text.
Adjust the margin-right value as needed to ensure proper spacing between the image and text. You can also adjust the size of the image using CSS if needed.
15