How To Put More Than One Image In One Line Or One Row In Text Web Part In SharePoint Online

Jun 15, 2025 by ADMIN 92 views

How to Display Multiple Images in a Single Row within a SharePoint Online Text Web Part

In the realm of modern SharePoint Online page design, the Text web part stands out as a versatile tool for blending textual content with multimedia elements. A common requirement arises when users aim to display multiple imagesinline, effectively creating a visual row within the text web part. While SharePoint Online offers a drag-and-drop interface for inserting images, achieving a seamless inline display can sometimes pose a challenge. This comprehensive guide will explore several methods to insert multiple images in a single line or row within the Text web part in SharePoint Online, ensuring your pages are both informative and visually appealing.

Understanding the Challenge of Inline Image Display

When you insert images directly into a Text web part using the built-in image insertion tool, SharePoint often renders these images in a stacked format, one below the other, rather than side by side. This behavior stems from the default block-level display nature of image elements within HTML. To overcome this, we need to employ techniques that allow images to flow inline, sharing the same horizontal space. The key is to modify the default rendering behavior of images within the Text web part.

Achieving Inline Image Display requires a blend of understanding HTML structure and SharePoint's web part capabilities. We'll delve into practical approaches, from simple adjustments within the Text web part's formatting options to employing more advanced techniques like embedding HTML code. Each method caters to different levels of technical expertise, ensuring there's a solution for every SharePoint user.

Method 1: Utilizing Inline Styles

One of the simplest methods to achieve inline image display is by utilizing inline styles within the Text web part. This approach involves directly embedding CSS styles within the HTML <img> tags to control their display behavior. By setting the display property to inline or inline-block, we instruct the browser to treat the images as inline elements, allowing them to flow side by side.

Step-by-Step Guide to Inline Styles

Insert Images: Begin by inserting your images into the Text web part using the standard image insertion tool. SharePoint will typically place these images in a stacked manner.
Access HTML Editor: Within the Text web part, locate the HTML editor option. This may be represented by a <> icon or a similar symbol, depending on your SharePoint version and configuration. Clicking this option will reveal the underlying HTML code of your text web part content.
Modify Image Tags: Identify the <img> tags corresponding to the images you wish to display inline. Within each tag, add the style attribute and set the display property to either inline or inline-block. For instance, if your original image tag looks like this:
```
<img src="your-image-url.jpg" alt="Image Description">
```
Modify it to include the inline style:
```
<img src="your-image-url.jpg" alt="Image Description" style="display: inline;">
```
Or:
```
<img src="your-image-url.jpg" alt="Image Description" style="display: inline-block;">
```
The inline value will make the images flow like text, while inline-block allows you to control the width and height of the images more precisely.
Adjust Image Spacing (Optional): To add spacing between the images, you can use the margin property within the style attribute. For example:
```
<img src="your-image-url.jpg" alt="Image Description" style="display: inline; margin-right: 10px;">
```
This will add a 10-pixel margin to the right of each image, creating visual separation.
Save and Preview: Once you've modified the image tags, save your changes within the HTML editor and preview the page. Your images should now appear in a single line or row.

Advantages of Inline Styles

Simplicity: This method is relatively straightforward and easy to implement, especially for users with basic HTML knowledge.
Direct Control: Inline styles provide direct control over the display behavior of individual images.

Considerations for Inline Styles

Maintenance: If you need to change the styling of multiple images, you'll have to edit each <img> tag individually, which can be time-consuming for larger sets of images.
Best Practices: While inline styles offer a quick solution, they are generally not considered the best practice for styling web content in the long run. External CSS stylesheets or internal <style> blocks are preferred for better maintainability and separation of concerns.

Method 2: Embedding HTML with a Table

Another effective approach to display images in a row is by embedding HTML code that utilizes a table structure. Tables, while traditionally used for tabular data, can also serve as layout tools to arrange elements in rows and columns. In this method, we'll create a simple table with a single row and multiple columns, placing each image within its own table cell.

Step-by-Step Guide to Embedding HTML with a Table

Access HTML Editor: Similar to the previous method, start by accessing the HTML editor within the Text web part.

Insert Table HTML: Insert the following HTML code snippet into the editor:

<table>
<tr>
<td><img src="your-image-url-1.jpg" alt="Image 1"></td>
<td><img src="your-image-url-2.jpg" alt="Image 2"></td>
<td><img src="your-image-url-3.jpg" alt="Image 3"></td>
</tr>
</table>

Replace `