How To Wrap The Text Around An Image Using HTML And CSS

Trang chủ » Html Wrap Text Around Image With Caption » How To Wrap The Text Around An Image Using HTML And CSS

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
▲ Open In App How to wrap the text around an image using HTML and CSS ? Last Updated : 11 Jan, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

Wrapping the text around an image is quite attractive for any kind of website. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. In HTML :

  • You can also use CSS shape-outside Property depending on the shape of your image.
  • Align images to the right, left, or center in HTML for diverse layouts.Below examples illustrate the above approach:

Example 1: In this example, the image is floating right side of the screen and the text is wrapping the image. We don’t require shape-outside property here because the shape image is usual(square).

HTML

<!DOCTYPE html> <html> <head> <title> Wrapping an Image with the text </title> <style> body { margin: 20px; text-align: center; } h1 { color: green; } img { float: left; margin: 5px; } p { text-align: justify; font-size: 25px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <b> A Computer Science Portal for Geeks </b> <div class="square"> <div> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" alt="Longtail boat in Thailand"> </div> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </div> </body> </html>

Output:  

Example 2: In this example, we will wrap different shape images and here we will use CSS shape-outside property for the better viewing experience. 

HTML

<!DOCTYPE html> <html> <head> <title> Wrapping an Image with the text </title> <style> body { margin: 20px; text-align: center; } h1 { color: green; } /* This div design part is used as an Image */ .round { width: 200px; height: 200px; border-radius: 50%; text-align: center; font-size: 30px; float: left; font-weight: bold; /* Change the shape according to the image */ shape-outside: circle(); background-color: Green; color: white; } article { padding-top: 75px; display: inline-block; } p { text-align: justify; font-size: 22px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <b> A Computer Science Portal for Geeks </b> <div class="round"> <article>GeeksforGeeks</article> </div> <p> How many times were you frustrated while looking out for a good collection of programming/ algorithm/ interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </body> </html>

Output:  

Example 3: Using table tag we are going to create a table and inside tables one column we will put image and into another column whatever information you want to insert.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text around image</title> </head> <body> <h1 style="color: green; text-align: center;"> GeeksforGeeks </h1> <h3 style="color: black; text-align: center;"> A computer science portal </h3> <br> <table cellspacing="10"> <tr> <td> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" alt="Longtail boat in Thailand"> </td> <td> <p> How many times were you frustrated while looking out for a good collection of programming/ algorithm/ interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </td> </tr> </table> </body> </html>

Output : 

S

sdutta203sagnik Follow Improve Previous Article How to wrap a text in a <pre> tag using CSS ? Next Article

Similar Reads

  • How to wrap the text around an image using HTML and CSS ? Wrapping the text around an image is quite attractive for any kind of website. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. In HTML : You can also use CSS shape-outside Property depending on the sha 4 min read
  • How to Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag 2 min read
  • How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance. Syntax . 1 min read
  • How To Place Text on Image using HTML and CSS? To place text on an image using HTML and CSS, you can use different techniques to make the text look good and easy to read. Here, we will explore two approaches for placing text over an image using simple HTML and CSS. 1. Using Absolute Positioning This approach uses absolute positioning to place th 3 min read
  • How To Create a Thumbnail Image using HTML and CSS ? The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye 1 min read
  • How to make a vertical wavy text line using HTML and CSS ? In this article, a wavy animated text is implemented using HTML and CSS. It is one of the simplest CSS effects. For a beginner, it is one of the best examples to learn the concept of CSS pseudo-elements. Approach: The basic idea of getting wavy texts is performed by using the combination of some CSS 2 min read
  • How to Add a Login Form to an Image using HTML and CSS? The login form on an Image is used on many websites. Like hotel websites that contain pictures of the hotels or some organizations that organize special events holding that event picture and login form. In that case, you can design a login or registration form on that picture. This design will make 2 min read
  • How to Add Images to a List Using HTML? To add images to a list using HTML, you can place <img> elements within list items (<li>). This allows you to create ordered or unordered lists that contain images as their content. Example of Adding Images to a ListHere’s how you can achieve this: Example 1: Unordered List with Images[G 2 min read
  • How to Create an Image Overlay Icon using HTML and CSS ? Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us 3 min read
  • How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read
  • How to design Meet the Team Page using HTML and CSS ? You will learn how to create a simple and responsive “Meet the Team” page using HTML and CSS. We will use HTML to structure the content of the page, such as the headings, paragraphs, images, and links, and then we use CSS to style the elements of the page, such as the colors, fonts, and layout. Here 5 min read
  • How to add a mask to an image using CSS ? The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper 2 min read
  • How to Create Image Accordion using HTML and CSS ? In this article, we will see how to create an image accordion using HTML & CSS that is basically used for advertising purposes on e-commerce websites. An Accordion is often used to open multiple sections at full width & also content pushes the page content downward. Approach:Create an HTML f 3 min read
  • How to Set Caption for an Image using HTML? A caption for an image is a short description for a title that explains the image, providing context or additional information. In HTML, add a caption to an image by using the <figure> tag for the image and the <figcaption> tag below it for the caption text. Syntax <figcaption> Fig 1 min read
  • How to Add filter to the background image using CSS? Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design 3 min read
  • How to wrap text inside and outside box using CSS ? In CSS, controlling how text wraps inside and outside a box is essential for creating a visually appealing and readable layout. When the content of a text element is too long to fit in its container, text wrapping comes into play. Using properties like word-wrap, word-break, and overflow-wrap, devel 2 min read
  • How to Vertically Align Text Next to an Image using CSS ? Adding images into our websites is a common practice, and there are situations where text must be vertically aligned alongside an image. For example, a user’s name should appear immediately next to their profile picture, vertically aligned for optimal readability . In this article, we will see how t 2 min read
  • How to add a button to an image using CSS ? In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope 4 min read
  • How to wrap a text in a <pre> tag using CSS ? In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the <pre> tag does no 2 min read
Article Tags :
  • CSS
  • HTML
  • Web Technologies
  • CSS-Misc
  • HTML-Misc
+1 More Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Suggest changes Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Html Wrap Text Around Image With Caption