Image and Title Next to it using CSS

Placing an image and a title side by side is a common layout pattern for cards, headers, media objects, profile rows, product previews, blog listings, and navigation elements. Modern CSS makes this straightforward with Flexbox, giving you clean control over horizontal alignment, spacing, image sizing, and how the layout behaves across screen sizes.

The basic idea is to wrap the image and title in a shared container, then use CSS to arrange the children in a row. From there, you can fine-tune the gap between elements, vertically center the title, constrain the image dimensions, and adapt the layout so it stacks neatly on smaller screens.

#	Preview	Product	Price
1		The Cost of Inheritance: An America ReFramed Special		Buy on Amazon
2		True Haunted Tales	$2.99	Buy on Amazon
3		Prince! Behind the Symbol		Buy on Amazon
4		Great American Eclipse		Buy on Amazon
5		The Cost of Inheritance: An America ReFramed Special		Buy on Amazon

Basic HTML Structure for an Image and Title

Before applying CSS, start with a small, predictable HTML structure. The most common pattern is a wrapper element that contains an image and a text element. The wrapper gives CSS one parent to control, while the child elements remain simple and reusable. For a title beside an image, a <div>, <article>, <header>, or <a> can all be appropriate depending on the context.

A basic version might look like a container with an <img> followed by a heading. The image should always include an alt attribute. If the image communicates meaning, describe it briefly. If it is decorative and the title already provides the meaning, an empty alt="" can be used so screen readers skip it. The heading level should match the document structure, so use <h2>, <h3>, or another level based on where the block appears on the page.

#1 Best Overall

The Cost of Inheritance: An America ReFramed Special

Buy on Amazon

Simple markup pattern

For a standalone media row, this structure is usually enough:

<div class="media-title">
<img src="profile.jpg" alt="Portrait of Maya Chen" class="media-title__image">
<h2 class="media-title__heading">Maya Chen</h2>
</div>

The class names are optional, but descriptive names make the CSS easier to read. The parent class, such as media-title, will later receive layout styles like display: flex. The image class can control width, height, cropping, and border radius. The heading class can control font size, color, line height, and margins.

When to wrap the title in a text container

If the title needs supporting text, metadata, or a button, place the heading inside a separate text wrapper. This keeps the layout flexible and prevents the image and text styles from becoming tangled.

<div class="media-block">
<img src="product.jpg" alt="Black wireless headphones" class="media-block__image">

<div class="media-block__content">
<h2 class="media-block__title">Wireless Headphones</h2>
<p class="media-block__text">Noise-cancelling audio with a lightweight design.</p>
</div>
</div>

This pattern is useful for product cards, author bios, feature rows, article previews, and dashboard list items. The content wrapper gives you a clean target for vertical spacing between the heading and paragraph, while the outer wrapper still controls the side-by-side relationship between the image and the content.

Choosing semantic elements

The wrapper element should reflect the purpose of the block. For a clickable article preview, an <article> with an internal link may be suitable. For a site header with a logo and name, a <header> element is more meaningful. For a navigation logo, the image and title may sit inside an <a> so the whole brand area links to the homepage.

• Use <div> for generic layout blocks with no special meaning.
• Use <article> for self-contained content such as a blog card or news preview.
• Use <header> for branding areas, section headers, or card headers.
• Use <a> when the image and title together should behave as one link.

With the HTML in place, the CSS can focus on layout rather than structure. A clear parent wrapper, a properly described image, and a correctly chosen heading level make the side-by-side design easier to style, more accessible, and simpler to adapt for different screen sizes.

Using Flexbox to Place the Image Next to the Title

Flexbox is the most practical way to place an image and a title next to each other because it is designed for one-dimensional layouts: items arranged in a row or a column. If your HTML has a wrapper around the image and heading, applying display: flex to that wrapper immediately makes the children sit side by side in a horizontal row by default.

A common structure might contain an image followed by a heading inside a parent element such as .media-heading. The CSS only needs a few properties to create a clean horizontal layout:

.media-heading {
display: flex;
align-items: center;
gap: 12px;
}

.media-heading h2 {
margin: 0;
}

In this setup, display: flex places the image and title on the same line. align-items: center vertically centers the title relative to the image, which is useful when the image is taller than the text. gap creates consistent spacing between the image and the heading without needing margin on individual elements. Removing the default margin from the heading helps prevent unexpected vertical spacing.

Rank #2

True Haunted Tales

$2.99

Buy on Amazon

Basic Flexbox Pattern

• Parent container: gets display: flex.
• Image and title: become flex items.
• gap: controls the space between them.
• align-items: controls vertical positioning.
• image sizing: keeps the layout predictable.

You can also control whether the image appears before or after the title by changing the HTML order, or by using Flexbox ordering. For example, flex-direction: row-reverse places the image on the right and the title on the left:

.media-heading.reverse {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
gap: 12px;
}

Flexbox also works well when the title needs extra space. If the heading is long, allow the text area to shrink properly by setting min-width: 0 on the heading or its text wrapper. This helps prevent overflow in narrow containers:

.media-heading h2 {
margin: 0;
min-width: 0;
}

For layouts where the title may wrap onto mulle lines, keep the image fixed in size and let the heading use the remaining horizontal space. This creates a stable layout that looks good in navigation headers, profile rows, article previews, product cards, and media objects. A slightly more complete version might look like this:

.media-heading {
display: flex;
align-items: center;
gap: 1rem;
}

.media-heading h2 {
margin: 0;
font-size: 1.25rem;
line-height: 1.2;
}

The flex: 0 0 72px rule keeps the image from growing or shrinking, while the heading naturally occupies the remaining space. This gives you a dependable side-by-side layout with minimal CSS, making Flexbox a strong default choice whenever an image and title need to sit neatly on the same row.

Controlling Alignment, Spacing, and Image Size

Once the image and title are sitting side by side, the next step is making the layout look intentional. In a Flexbox layout, the parent container controls how the items align, while the image and title elements control their own size, spacing, and visual balance. A typical structure might use a wrapper such as .media, an image with a class like .media__image, and a heading inside a text container. From there, small CSS adjustments can make the difference between a rough layout and a polished one.

For vertical alignment, use align-items on the flex container. If the image and title should be centered along the same horizontal line, align-items: center; is usually the best choice. For a layout where the title should align with the top of the image, use align-items: flex-start;. This is common in media blocks, article previews, and card rows where the heading may wrap onto mulle lines. If the title should sit near the bottom of the image, align-items: flex-end; can be used, though it is less common for standard content layouts.

Spacing between the image and title is best handled with the gap property on the flex container. This is cleaner than adding margin to the image or heading because it keeps spacing controlled in one place. For example, gap: 1rem; creates consistent space between the two items, while gap: 1.5rem; or 2rem works well for larger hero headers or feature blocks. If the layout includes more text under the title later, the same gap still separates the image column from the text column without extra CSS changes.

Image sizing should be explicit enough to prevent layout shifts but flexible enough to work across screen sizes. A common pattern is to set a fixed width and height, then use object-fit: cover; so the image fills its box without distortion. For example:

.media {
display: flex;
align-items: center;
gap: 1rem;
}

Rank #3

Prince! Behind the Symbol

Buy on Amazon

.media__image {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 8px;
}

.media__title {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
}

This setup creates a compact layout where the image has a predictable footprint and the title aligns neatly beside it. The margin: 0; on the heading is useful because headings come with browser default margins that can make alignment appear uneven. Adjusting line-height also helps when the title wraps onto two lines, keeping the text block visually tight and readable.

Useful alignment and sizing variations

• Avatar and name: Use a small square or circular image, such as 48px by 48px, with border-radius: 50%; and align-items: center;.
• Article preview: Use a wider thumbnail, such as 140px by 90px, with align-items: flex-start; so the title begins at the top edge of the image.
• Product or feature row: Use gap: 1.5rem; or larger and let the title container grow with flex: 1; so long headings have enough room.

When the title is long, add min-width: 0; to the text container if it is inside a flex row. This allows the text to shrink properly instead of forcing the layout wider than its container. For single-line titles, you can combine white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis; to keep the row compact. For multi-line titles, avoid fixed heights on the text area and let the heading wrap naturally.

Making the Layout Responsive on Small Screens

On wider screens, placing an image and title side by side usually works well because there is enough horizontal space. On phones, the same layout can become cramped: the title may wrap awkwardly, the image may shrink too much, or the content may overflow the container. A responsive version should let the layout adapt, usually by stacking the image above the title or by reducing the image size while keeping both items readable.

The most common Flexbox approach is to use a media query that changes the flex direction at a chosen breakpoint. For example, the layout can use display: flex and align-items: center on desktop, then switch to flex-direction: column on small screens. This keeps the HTML simple while giving you full control over how the image and title behave on different devices.

.media-heading {
display: flex;
align-items: center;
gap: 1rem;
}

.media-heading h2 {
font-size: 1.4rem;
}
}

In this example, the image stays fixed at 96px on larger screens, which prevents it from becoming too large inside a horizontal row. The flex-shrink: 0 declaration keeps the image from being squeezed when the title is long. On smaller screens, the image becomes fluid with width: 100% and max-width: 280px, so it can scale down inside narrow containers without growing beyond a sensible size.

Rank #4

Great American Eclipse

Buy on Amazon

Responsive layout options

• Stack vertically: Use flex-direction: column when the image and title need more breathing room.
• Keep them side by side: Use smaller image dimensions and a shorter gap if the design must remain horizontal.
• Center the content: Change align-items to center on mobile for profile headers, author blocks, or compact cards.
• Preserve left alignment: Use align-items: flex-start when the layout belongs in an article, list item, or product description.

You can also make the layout responsive without relying only on media queries. A flexible image size such as width: clamp(64px, 20vw, 120px) lets the browser choose a size between a minimum and maximum value based on the viewport width. This works well when you want the image and title to remain side by side for longer before stacking. For text, font-size: clamp(1.25rem, 4vw, 2rem) can keep headings readable across phones, tablets, and desktops.

For very narrow screens, watch for long titles. Even with a responsive layout, a title with long words, product codes, or unbroken text can overflow. Adding overflow-wrap: anywhere to the heading can prevent horizontal scrolling. Combining flexible image sizing, sensible gaps, and a mobile stacking rule gives you a layout that remains clean whether it appears in a hero header, media object, profile card, or article preview.

Styling Variations for Cards, Headers, and Media Blocks

Once the image and title sit side by side, the same layout pattern can be adapted for many common interface elements. A product card, article preview, profile header, navigation brand area, or media object can all use the same core structure: a wrapper with an image element and a text container. The visual style changes through padding, borders, shadows, background colors, border radius, and how much space the image is allowed to occupy.

Card-style image and title layout

For cards, the image-and-title row usually appears inside a bordered or elevated container. This works well for blog previews, product listings, course tiles, and dashboard widgets. A typical card style uses a light background, rounded corners, internal padding, and a subtle shadow. The image is often fixed to a predictable size so that mulle cards align neatly in a grid.

For example, a card variation might use a flex container with align-items: center, a gap of 1rem, and an image sized at 80px by 80px with object-fit: cover. The wrapper can include padding: 1rem, border-radius: 12px, and box-shadow for depth. If the image represents a product or avatar, using a square or circular crop keeps the layout consistent even when source images have different dimensions.

Header and brand layouts

In headers, the image is commonly a logo or icon placed next to a site title, product name, or page heading. This version usually needs tighter spacing and better vertical alignment because it sits near navigation links or action buttons. The image may be smaller, such as 32px or 40px wide, while the title may use a larger font size and heavier weight. A header layout often benefits from justify-content: space-between on the outer header, with the logo-title group as its own flex container.

This pattern is also useful for user profile headers. A circular avatar can sit next to a name and role, with the text container using a vertical stack. In that case, the image and text are side by side, but the title and subtitle inside the text area are arranged top to bottom. The image can use border-radius: 50%, while the subtitle can use a muted color and smaller font size to create a clear visual hierarchy.

Media block variations

A media block is a reusable layout where a thumbnail, icon, or avatar appears beside content. It is common in comments, notifications, search results, and article lists. Unlike a simple title-only layout, a media block may include a heading, short description, date, badge, or button. The best approach is to keep the outer wrapper as a row and place all text-related content in a flexible column.

• Compact media block: use a small 48px image, a narrow gap, and minimal padding for dense lists such as notifications.
• Editorial preview: use a larger thumbnail, a bold title, a short excerpt, and a date or category label.
• Profile row: use a circular avatar, a name as the title, and a secondary line for username, job title, or status.
• Feature block: use an icon or illustration beside a headline and supporting text, often with more generous spacing.

These variations should still account for responsiveness. A card may keep the image beside the title on tablets but stack vertically on narrow screens. A header logo and title may remain in one row, while navigation wraps or collapses separately. Media blocks can reduce image size on smaller screens or allow the text column to shrink with min-width: 0 so long titles can wrap instead of forcing horizontal overflow.

Common Issues and How to Fix Them

Even a simple image-and-title layout can break in small but noticeable ways: the image may stretch, the title may wrap awkwardly, vertical alignment may look off, or the whole row may overflow on mobile. Most of these problems come from default browser behavior, missing size constraints, or Flexbox properties that need to be adjusted for the content.

The image stretches or becomes distorted

If the image looks squeezed or stretched, it usually has both width and height forced without preserving its aspect ratio. Set a fixed width or height, then use object-fit to control how the image fills its box. For a small avatar-style image, this is a common pattern:

Best Value

The Cost of Inheritance: An America ReFramed Special

Buy on Amazon

.media img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }

For logos or icons that should not be cropped, use object-fit: contain; instead. Also check that the image is not inheriting a global rule such as img { width: 100%; height: 100%; }, which can unintentionally affect small inline media layouts.

The title does not align nicely with the image

When the image and title appear vertically mismatched, adjust the Flexbox alignment on the parent container. For most image-and-title rows, align-items: center; gives the cleanest result because it centers the title against the image height. If the title has mulle lines and should start at the top of the image, use align-items: flex-start;.

• Centered row: use align-items: center; for icons, avatars, and compact headers.
• Top-aligned media block: use align-items: flex-start; when the title is followed by supporting text.
• Baseline alignment: use align-items: baseline; when matching text baselines matters more than image centering.

The spacing is inconsistent

A common mistake is adding margin directly to the image, such as margin-right: 16px;. This works, but it can become harder to manage when the layout changes direction on mobile. A cleaner approach is to use gap on the flex container: .media { display: flex; align-items: center; gap: 1rem; }. The gap remains predictable and works whether the layout is horizontal or vertical.

The title overflows or refuses to wrap

Long titles, URLs, product names, or headings without spaces can push the image off-screen. In a Flexbox layout, the text area may need min-width: 0; so it is allowed to shrink inside the row. Apply it to the title wrapper, not the image: .media-content { min-width: 0; }. Then add wrapping rules such as overflow-wrap: break-word; for long strings.

Another frequent issue appears when the image shrinks too much beside a long title. Prevent that by setting flex-shrink: 0; on the image. For example, .media img { flex-shrink: 0; } keeps an avatar, logo, or thumbnail at its intended size while the title area adjusts around it. Combined with sensible width, height, gap, and responsive rules, these fixes make the image-and-title layout stable across cards, headers, lists, and content blocks.

Frequently Asked Questions

What is the easiest CSS way to put an image and title side by side?

The simplest modern approach is to wrap the image and title in a parent container and apply display: flex; to that container. Use align-items: center; to vertically center them and gap to control the space between the image and text.

How do I keep the image from becoming too large next to the title?

Set a fixed width or a maximum width on the image, such as width: 80px; or max-width: 120px;. Also add height: auto; so the image keeps its natural proportions instead of stretching.

How can I make the image and title stack on mobile screens?

Use a media query to change the flex direction on smaller screens. For example, keep flex-direction: row; on desktop, then switch to flex-direction: column; under a breakpoint like 600px.

How do I align the title to the top of the image instead of the center?

Change the parent container’s alignment from align-items: center; to align-items: flex-start;. This places the top of the title area in line with the top of the image, which is useful for media blocks or card layouts with longer text.

Why is there unwanted space under or around the image?

Images are inline elements by default, which can create small spacing below them due to baseline alignment. Set the image to display: block; and control spacing with gap, margin, or padding on the parent container instead.

Bottom Line

Placing an image and a title side by side is straightforward with modern CSS, especially when using Flexbox for alignment, spacing, and responsive behavior. By controlling properties like display: flex, align-items, gap, image sizing, and media queries, you can create layouts that look clean on both desktop and mobile screens.

Start with a simple flex container, then adjust spacing, vertical alignment, and wrapping based on your design needs. If the layout must adapt across screen sizes, add a small media query so the image and title can stack neatly on narrower devices.

Quick Recap

Bestseller No. 1

The Cost of Inheritance: An America ReFramed Special

Bestseller No. 2

True Haunted Tales

$2.99

Bestseller No. 3

Prince! Behind the Symbol

Bestseller No. 4

Great American Eclipse

Bestseller No. 5

The Cost of Inheritance: An America ReFramed Special

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.