The text-align center is not functioning properly within an inline-block HTML table

For my HTML email, I have chosen to use tables for each navigation element. To ensure these tables are displayed inline, I applied display:inline-block; which yielded the desired outcome. However, aligning the text inside the table has proven to be a challenge despite using text-align: center; on the table, td, and a tag.

I am aware that this method works with divs, but I have yet to find a solution for tables.

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="right" valign="top">

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 1
     </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center" style="text-align:center;"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 2
                    </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82; text-align:center;">
     option 3
     </a>

                </td>
            </tr>
        </table>
    </td>
</tr>

CSS

.navInline {
display:inline-block;
vertical-align:top;
text-align: center !important; }

This is the current code that is not functioning as expected.

http://jsfiddle.net/nathanaric/pf35h/9/

htmlhtml-emailcss

Answer №1

Make sure to specify a width attribute for your table cells.

For instance:

<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
  <tr>
    <td align="center" width="130"><a href="#" style="text-decoration: none; color: #005E82;">option 1</a></td>
  </tr>

Answer №2

The selected answer suggests adding width, but I have a different opinion on that. The issue lies in the inline-block attribute affecting all the user-agent defaults of the table child elements. By replacing display: inline-block with float: left, you can achieve the same results while ensuring all other CSS styles fall into place properly (such as text alignment).

.navInline {
float: left;
vertical-align: top;
text-align: center !important;

}

Check out this fiddle showcasing the new style.

http://jsfiddle.net/bdTUz/

However, it's worth noting... If you're creating an email template, classes may not be supported. In my experience with HTML-based emails, it's best to use inline styles for compatibility.

This resource could prove very useful:

Answer №3

By using a list instead of DIVs, I was able to successfully address your concerns in a much more organized manner. You can view the functioning code on this JSFiddle link:

HTML

  <ul class="navInline">
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  </ul>

CSS

    .navInline li {
    display:inline-block;
    list-style:none;
    border: 1px solid #333;
    padding: 5px;
    background-color: yellow;

}

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

Share and sign with the href link to the PHP webpage for assistance

Here is a problem I am facing: browse_cat.php?cat_gr='Mopeds &amp; Traktors'"> In the browse_cat.php file, I have used this code to retrieve the above "category": $cat=$_GET['cat_gr']; echo $cat; The output of thi ...

phpjavascripthtml

The parent and child elements both attempted to define the background color, but neither was successful in applying it

Here is the html code snippet: body { font-family: Arial, Helvetica, sans-serif; } header { background-color: rgb(93, 43, 78); background-image: -webkit-linear-gradient(right, rgb(93, 43, 78 ...

htmlcssbackground-imagebackground-color

Achieved anchoring an object to the top of the page while scrolling

Recently, I've been working on a piece of code to keep my div fixed at the top of the page while scrolling. However, it doesn't seem to be functioning as intended. Would anyone be able to point out where I might have gone wrong? The element in ...

javascriptjqueryhtmlcss

css: discrepancy in positioning between image and header

I'm struggling to properly align an image with a header within a navigation menu. The desired outcome is for everything to be aligned at the bottom. I have set up a jsfiddle to showcase the problem: http://jsfiddle.net/graphicsxp/j2t9R/ ...

htmlcss

Find your way to a designated location on a fluid Angular 2 webpage

Imagine I'm on a webpage where several items are displayed using *ngFor. Each item has a link that takes me to a different page when clicked. However, when I return to the original page using the back button, I'd like to be scrolled back to the s ...

htmlangularangular2-routingngforanchor-scroll

How to split a webpage down the middle using the CSS Transform Property

Currently, I am wanting to divide my webpage diagonally in half by utilizing the CSS transform property with a -45-degree angle to create the desired effect. ...

htmlcss

Enhanced HTML5 semantic functionality available for all browsers requiring it

There is a tool called HTMLshiv that we are instructed to use with IE9- but it seems that older versions of other browsers do not fully support those tags. Is there a combined conditional statement that can be used for all browsers? If HTMLshiv only work ...

htmlcross-browsersemantics

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

javascripthtmlcss

Verify if data already exists in an HTML table column using JavaScript

As a beginner in web programming, I am currently trying to dynamically add data to a table. But before inserting the data into the table, my requirement is to first verify if the data already exists in a specific column, such as the name column. function ...

javascripthtmljquery

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

cssdojoxpagesdijit.form

Display the onclick event of multiple buttons on a web page

I am currently working on extracting the "onclick" attribute (onclick="openDirection( 41.051777,28.986551)") from the first button element within each li element. My goal is to display all of the coordinates. In the provided code snippet, I have been abl ...

pythonhtmlseleniumcss-selectors

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

javascriptjqueryhtmlajaxxmlhttprequest

Automatically populate login credentials on a webpage using Javascript scripting

Can anyone provide insights on why the input credentials on a webpage cannot be autofilled with this code? Is there a solution to make it functional? Trying to automate login process using JavaScript: function Test() { var name = document.getElementBy ...

javascriptjqueryhtmlcssforms

What is the process of utilizing PHP to generate and insert HTML tags into a separate HTML file?

I am facing an issue with two files in my project - input.php and output.html. Within the input.php file, the code is as follows: <?php $file="output.html"; $doc=new DOMDocument('1.0'); $doc->loadHTMLFile($file); $elements = ...

phphtmlwritefile

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

csshtmlthymeleaf

How to center an image within a viewport without worrying about the width of the viewport

I'm working on centering an image slideshow within the viewport, regardless of its width. It's easy to accomplish when the viewport is wider than the image by using margin: auto;. However, when the viewport is narrower than the image, such as on ...

htmlcss

How about: "Insert a line break inside a div element"

My goal is to have 3 icons positioned side by side that will float left if the window shrinks. Under each icon, I plan to include some text. Below you can see that I've made progress on this layout. .icons { BORDER-TOP: black 1px solid; HEIGHT: 10 ...

htmlcss

Showcasing the Characteristics of Products in a Table on Prestashop

Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...

phphtmlcssprestashopprestashop-1.5

Css can be quite finicky when it comes to responsiveness

I'm currently working on a project and I've run into an issue where the CSS gets messed up when I resize the window. I'm struggling to make it responsive while still maintaining the desired look. Even after switching to rem units, the probl ...

css