how to insert image inside a text box using html or css

Store Design
, ,

Topic summary

A user asks how to insert an image inside a text box within an “image with text” section using HTML or CSS.

Solution provided:

  • Create a container <div> with class “text-box” containing both an <img> tag and text content
  • Use CSS flexbox (display: flex) with align-items: center to vertically align the image and text
  • Add basic styling: border, padding, and margin-right on the image for spacing
  • Adjust image width as needed (example shows 50px width with auto height)

This approach uses standard HTML/CSS without requiring Liquid templating modifications.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

inserting image inside a text box in the section of image with text

with CSS or HTML any ideas ?

2

Hi @tarekanani

To insert an image inside a text box using HTML and CSS, follow these steps:

HTML:

Image

Your text goes here.

CSS:

.text-box {

border: 1px solid #ccc;

padding: 10px;

display: flex;

align-items: center;

}

.text-box img {

width: 50px; /* Adjust size as needed */

height: auto;

margin-right: 10px; /* Space between image and text */

}