Center the images within the table, and if there is additional text below the image, make sure it appears on a new line

I am looking to center images within a table element and have the text wrap to a new line if it overflows.

Is there a way in HTML Emailers to position images at the center of a table with text below them that are placed side by side?

My requirement is to have an image followed by text. If the text exceeds the available space, it should continue on a new line.

I am restricted to using inline CSS only and cannot utilize other tags such as div. Also, I am unable to use positioning properties due to creating HTML emailers, so sticking to the table tag is essential.

<table style="margin: 0 auto; border: thin green solid;" width="600">
            <tr>
                <td style="margin:0; padding: 0;" align="center">
                    <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
                    <p>Some Text</p>
                </td>

                <td style="margin:0; padding: 0;" align="center">
                    <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
                    <p>Some Text</p>
                </td>

                <td style="margin:0; padding: 0;" align="center">
                    <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
                    <p>Some Text Some TextSome TextSome TextSome TextSome Text</p>
                </td>

                <td style="margin:0; padding: 0;" align="center">
                    <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
                    <p>Some Text</p>
                </td>
            </tr>
        </table>

As per the given code snippet, my goal is to have any overflow text appear on the next line while ensuring images remain centered within the table.

htmlcsshtml-tablecenterdisplay

Answer №1

Give this a shot:

<table style="margin: 0 auto; border: thin green solid;" width="600">
<tr>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.example.com/image1.jpg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.example.com/image2.jpg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.example.com/image3.jpg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.example.com/image4.jpg" width="110" height="110" style="display: block; margin: 0 auto;"> 
    </td>
</tr>
<tr>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text Some TextSome TextSome TextSome TextSome TextSome Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
</tr>

Make sure to match the table cells' width with the image above them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

The menu does not appear when I attempt to right-click on the grid header

Is there a way to add a right-click menu to the grid header? The right-click functionality works on Google links, but not on the grid header. Any suggestions on how to resolve this issue? Below is the code I'm using: http://jsfiddle.net/c7gbh1e9/ $( ...

javascriptjqueryhtmlcss

Leverage Bootstrap to manage multiple tab panels with one tab navigation system

Is there a way to control two different tab contents with a single tab navigation in Bootstrap 4? In Bootstrap 3, I used comma separated data targets for achieving this (like in this example: ). However, in Bootstrap 4, this method no longer works for ta ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-5

Non Rectangular Header with Bootstrap's Responsive Navbar

Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...

htmlcsstwitter-bootstrap

Turn off the footer button on materialize.css modal

I'm struggling to disable one of the modal footer buttons in materialize.css. I tried using disabled="disabled", but it doesn't seem to be working. You can see my example on jsfiddle. <a class="waves-effect waves-light btn modal-trigger" href ...

jqueryhtmlcssmaterialize

How to give focus to a div in IE 8 after pressing the tab key, no jQuery required

We are facing a challenge with our datagrid where we have implemented navigation using the tab key. In IE 7 & 8, pressing the tab key shifts the focus away from the grid to the next element on the page. While in other browsers, we were able to prevent thi ...

javascriptinternet-explorerhtmlfocus

Unable to apply filter in IE11

When applying color to bootstrap 2.3.2 Icons, I utilize the filter property in CSS. While this method is effective in most browsers, it does not work as expected in IE11. .apply-color { filter: opacity(0.5) drop-shadow(0 0 0 blue); } What is the worka ...

cssinternet-explorerbootstrap-4cross-browsericons

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

javascripthtmlangularjsgoogle-chrome-extensionbrowser-history

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

javascripthtmltypescriptjsfiddlecanvasjs

What is the correct way to properly insert a display none attribute

I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...

javascripthtmlcss

The :not() selector does not currently have the capability to support complex selectors within it

Combining the CSS3 :not() selector with the attribute contains selector can be a challenge, as it seems to not work properly. Here is an example of the markup: <input type='text'/> <input type='text' id="dasd_Date_asd"/> ...

htmlcsscss-selectors

Maintain the color of a Bootstrap 4 dropdown link even when it is open by incorporating hover

Currently, I am utilizing bootstrap 4 to create a menu that includes dropdown items. The issue I am facing is that when hovering over a dropdown link, the background color changes and the dropdown opens. However, as soon as I move the mouse to select one o ...

jquerycssbootstrap-4

Is it possible to display specific sections of a website by using CSS selection?

What is the most efficient way to display only specific elements on a webpage? For instance, if we want to show only the headlines on a news site without any other content. I am looking for a way to target elements using CSS so that only those selected i ...

javascriptcsscss-selectors

Dimensions of CSS Buttons

On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...

htmlcss

Experiencing issues on Chrome while switching stylesheets; any tips on avoiding this glitch?

I am currently working on designing a webpage and running into some issues with Chrome when changing stylesheets for light and dark themes. Initially, I have included this <link>: <link rel="stylesheet" href="/css/dark.css" id="theme"> To sw ...

htmljquerycssgoogle-chrome

Sending an array through HTML select using Jquery

Is this scenario possible: I have implemented an Ajax call to fetch results from a SQL query. The data is retrieved in an array format, which I then convert to JSON and output at the end of a PHP script that the Ajax function calls. Next, for each row in ...

jqueryhtmlarraysselect

Angular's HTML attribute conditional rendering

I want to dynamically assign a property to an HTML tag in Angular based on a condition. Here's an example: <button {{condition === true ? mat-raised-button : mat-button}} class="edit-button" > <span>Click here</span ...

htmlangular

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport

When I try to collapse the element at the bottom of my page, it fails to anchor to the newly opened element after clicking

I have a situation where an element at the bottom of my HTML page is not collapsed by default. When I click on an arrow just above it, the element displays. However, since the newly collapsed element is still "below the fold", users have no clue that click ...

cssbootstrap-4

Developing an interactive URL in an HTML page for a Flask web application

I'm attempting to create dynamic URLs in HTML and route all "orders/<key_id[0]>" to a Flask app. The hyperlink on the browser should display as a link to name, but it should actually route as "orders/<key_id[0]>". I've tried numerou ...

pythonhtmlflaskjinja2