How to Arrange Images and Text in HTML?
Last Updated :
11 Sep, 2024
In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enhance the user experience. We are going to arrange the images and text in HTML.
Below are the following approaches to arrange Images and Text in HTML:
Inline Arrangement
In an inline arrangement, images are placed directly within the flow of the text. The image can be treated like a character in the text, meaning it appears alongside the text, wherever the image tag (<img>) is located. This approach is best when you want to insert a small image inside the sentence or paragraph.
Example: In this example, the image is inserted in the middle of the text. The width and height attributes are used to control the image size.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Inline Image Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Inline Image Example</h2>
<p>Here is an inline image <img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908110717/geekforgeek.png"
alt="Example Image" width="100" height="100">
inside a paragraph of text.
The image fits naturally within the sentence.
</p>
</body>
</html>
Output: The image will appear inline with the text and the surrounding text will adjust accordingly.
OutputBlock Arrangement
In block arrangement, the image can be placed in its own block above or below the text. This approach is commonly used for placing the image as a header or footer for the section. The image and text are treated as the separate elements, stacked on the top of each other.
Syntax:
<div>
<img src="image.jpg" alt="Image Description">
<p>This is some text below the image.</p>
</div>
Example: In this example, the image appears above the text. we can adjust the image size using the width and height attributes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Block Image Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Block Image Example</h2>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908110717/geekforgeek.png"
alt="Image Example" width="200" height="150">
<p>The text is displayed below the image in
this block arrangement. Both elements
are placed in their own blocks, one
after another.
</p>
</div>
</body>
</html>
Output: The image will be placed above the text and the both are treated as the separate block elements.
OutputText Wrapping Around the Image
In this approach, the image can be placed to the left or right of the text, and the text wraps around the image. The layout is often used in the news articles or blogs where the image is placed beside the text. It can achieved using the CSS float property.
Syntax:
<style>
img {
float: left;
/* or right */
margin: 10px;
}
</style>
<p>
<img src="image.jpg" alt="Wrapped Image">
This text wraps around the image when the image is floated to the left or right.
</p>
Example: In this example, the image is floated to the right side and the text wraps around it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Float Image Example</title>
<style>
img {
float: right;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Float Image Example</h2>
<p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908110717/geekforgeek.png"
alt="Example Image" width="150" height="100">
The text will wrap around the image placed to
the right using the float property. The image
has margin added for
spacing.
</p>
</body>
</html>
Output: The image will be floated to the right and the text will wrap around it.
Flexbox Layout
Flexbox is the modern CSS layout model designed to the align and distribute items in the container, making it a great tool for responsive layouts. We can align the images and text side by side using Flexbox. It can provides the flexibility to adjust the layout for the different screen sizes.
Syntax:
<style>
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<div class="container">
<img src="image.jpg" alt="Image">
<p>This is some text aligned next to the image using Flexbox.</p>
</div>
Example: In this example, the image and text are aligned horizontally, and you can control the spacing using the gap property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Flexbox Image Example</title>
<style>
.flex-container {
display: flex;
align-items: center;
gap: 20px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Flexbox Image Example</h2>
<div class="flex-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908110717/geekforgeek.png"
alt="Flex Image" width="150" height="100">
<p>The image and text are aligned side
by side using Flexbox, allowing for
a flexible layout.
</p>
</div>
</body>
</html>
Output: The image and text will be displayed side by side with the Flexbox's flexible alignment.
OutputGrid Layout
CSS Grid is a powerful tool that allows you to create the complex layouts by dividing the page into the rows and columns. With the CSS Grid, we can arrange the images and text in the different areas of the grid, giving you precise control over the positioning.
Syntax:
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
</style>
<div class="grid-container">
<img src="image.jpg" alt="Image">
<p>This text is arranged next to the image using Grid layout.</p>
</div>
Example: In this example, the image can occupies the one column and the text occupies the another column in the grid.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Grid Layout Image Example</title>
<style>
.grid-layout {
display: grid;
grid-template-columns: 150px 1fr;
gap: 15px;
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Grid Layout Image Example</h2>
<div class="grid-layout">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908110717/geekforgeek.png"
alt="Grid Image"
width="150" height="100">
<p> Using Grid layout, the image is placed
in one column and the text in another
column, allowing for structured
layouts.
</p>
</div>
</body>
</html>
Output: The image and text are displayed in the two column grid, with the image in the one column and the text in another.
OutputConclusion
These methods can provides the flexible options for arranging the images and text in a HTML page, each suited for the different types of the layouts. Flexbox and Grid are modern approaches, providing the more straightforward ways to position images and text.
Similar Reads
How to make an image draggable in HTML?
Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5. Making any HTML5 elements including images draggable is
1 min read
How to Create an Image Map in HTML ?
An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp
2 min read
How to Add Image in HTML Table ?
Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a
2 min read
How to Insert an Image in HTML?
To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML. Table of Content Using img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary meth
1 min read
How to Center an Image in HTML?
Center an image in HTML can be done with the help of <center> tag. The <center> is depreciated from HTML5, so we can use the text-align property, margin, and different ways to center an image horizontally, vertically, or both using CSS. Table of Content Horizontally Center an Image using
3 min read
How to add background image in HTML ?
Adding a background image to HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add background image in HTML, but this attribute is depreciated in HTML5 and not in use. In place of background att
3 min read
How to Resize an Image in HTML?
Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint
2 min read
How to align Image in HTML?
Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou
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 create an image bullets in HTML ?
In HTML, there are two types of lists: ordered and unordered. Ordered lists are numbered with alphabet letters or Roman numerals, while unordered lists use dots. Sometimes, you may want to replace these bullets with an image to enhance the visual appeal of your web content. To get this, we can use t
2 min read