Place a button at the center of a table

I am having trouble centering a button that I built inside a table. The CSS doesn't seem to be correct and I can't figure out why. I would appreciate any help with this issue. Additionally, the button needs to be displayed in an email, in case that affects the solution.

https://i.sstatic.net/1OplH.png

.button a {
 padding: 8px 12px;
 border-radius: 4px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 16px;
 color: #ffffff;
 text-decoration: none;
 font-weight: bold;
 display: inline-block;
 float: none;
}
<tr>
 <td class="plr-10" style="padding:0 60px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody style=""><tr>
 <td style="padding-bottom: 10px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody><tr style="">
 <td class="text-16 tx-grey" valign="top" width="10" style="font-family:'Segoe UI', Arial, sans-serif;font-size:16px;line-height:26px;text-align:left;min-width:auto !important;color:#929292;">
 <strong style="font-weight: bold;">
 <br>1.</strong>
 </td>
 <td class="img" width="10" style="font-size:0pt;line-height:0pt;text-align:left;"></td>
 <td class="text-16" valign="top" style="color: rgb(37, 46, 93); font-family: &quot;Segoe UI&quot;, Arial, sans-serif; font-size: 16px; line-height: 26px; text-align: left; min-width: auto !important;"><br>
 Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text .</td>
 </tr>
 </tbody></table>
 </td>
 </tr>
 <tbody><tr>
 <td class="button a">
 <table width="40%" border="0" cellspacing="0" cellpadding="0">
 <tbody><tr>
 <td class="button" style="padding-bottom:25px; text-align: center">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody><tr>
 <td class="button" width="240" style="font-family:'Segoe UI', Arial, sans-serif;font-size:12px;line-height:16px;min-width:auto !important;text-align:center;color:#ffffff;" bgcolor="#1b55f5" >
 <a href="" target="_blank" class="link-grey" style="color:#b5b5b5;text-decoration:none;"><span class="link-grey" style="color: #ffffff; text-decoration: none;">Browse</span></a>
 </td>
 </tr>
 </tbody></table>
 </td>
 </tr>
 </tbody></table>
 </td>
 </tr>

htmlcssemailbutton

Answer №1

Try incorporating a real button into your design:

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="text-align: center;">
                <button class="button">hello</button>
            </td>
        </tr>
    </tbody>
</table>

Answer №2

To ensure the button is centered, you can use the following CSS code:

.button {
    display: flex;
    justify-content: center;
}

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

Tips for adjusting image hues in Internet Explorer?

I have successfully altered the colors of PNG images in Chrome and Firefox using CSS3. Here is my code: #second_image{ -webkit-filter: hue-rotate(59deg); filter: hue-rotate(59deg); } <img src='http://i.im ...

javascriptjquerycssinternet-explorer

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

htmlcss

The swipe function of Hammer.js is unable to detect gestures on a rotated iframe

After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe. body.rotate iframe { transform: rotate(90deg); transform-origin: top right; position: absolute; t ...

javascripthtmlcssiframehammer.js

Changing Ionic Column Widths Based on Content Length

In my dynamic ionic 2 grid system, I am facing a layout issue. <div> <ion-row> <ion-col > ; <ion-card-header class="card-header"> {{hunt.title}} </ion-card-header> </ion-col> <ion-col *ngIf="!hunt. ...

htmlcssangularionic-framework

Migration of Bootstrap Template to ASP.NET 4.5 Forms and Addressing Rendering Problems with Full Width Display

is a Bootstrap Template that I purchased and incorporated into my project. After migrating it to an ASP.NET 4.5 Web Forms setup, I encountered issues with the LayerSlider and Footer not rendering correctly in full width as they did on the original template ...

htmlcssasp.nettwitter-bootstrap

Tips for preserving session on an Atheros board with C programming to access a website

Currently, I am utilizing the Atheros development board with LSDK-9.2.0_U10.5.13 stack and mips-linux-2.6.31 Linux version. On the board, I have c file, html, js, and css files, without utilizing the cgi library or any scripting language like php. My curr ...

htmlcajaxlinux

Sort choices based on the optgroup category label text

I want to create a system where the user can select a game from one dropdown menu and then see only the consoles that game is available on in another dropdown menu. For example, if the user selects a game like Forza Horizon which is available on multiple c ...

javascriptjqueryhtmlfilterhtml-select

Styling a PrimeFaces panelGrid within a data table using CSS

I am struggling to add a background color to a panelgrid within a datatable when a hover event occurs. Despite writing the necessary code and CSS, nothing seems to work. Any suggestions on how to address this issue? <p:dataTable id="movementsTable" var ...

htmlcssjsfprimefaces

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

javascripthtmlangularjsjson

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...

htmlcss

Is there a way to utilize an Angular Material checkbox without any extra gaps or spacing?

Currently, I am working with Angular Material and trying to figure out how to remove the default spacing around the checkbox. The checkboxes in Angular Material are typically surrounded by some space (as shown in the image). Is there a simple way to elimin ...

cssangularangular-material

Having trouble setting the envelope sender correctly, resulting in emails being marked as spam in Gmail

I'm facing a major roadblock. The emails I'm creating seem to have the nobody apache address as the envelope sender. Below is my PHP code snippet: $to = $emailresult; include 'inc/msg/resetpassword.php'; if(mail($to, $subject ...

phpemailspamsender

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

@media (min-width: 992px) and (max-width: 1140px) { .mr-1024-none { margin-right: 0px !important; } .mt-1024 { margin-top: 1rem !important; } .d-1024-none { display: none !important; } } Utilizing the ...

javascriptcss

Allow all images on the webpage to be easily dragged and dropped into a designated upload section

I am in the process of developing a browser extension that allows users to save images from web pages into their favorites, similar to Pinterest. The functionality involves clicking on the extension icon which adds a special field to the HTML where users c ...

javascriptjqueryhtmldrag-and-dropdropzone.js

Creating a dynamic form in Angular based on user input

I am in the process of creating a dynamic web form where the user's input will determine the subsequent form inputs that are generated. For example: <mat-form-field> <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="Typ ...

htmlangulardomangular-forms

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

Adding multiple elements with varying content to a separate division

I am attempting to combine two div elements into a single div, but I'm encountering difficulties. Despite thoroughly examining my code, everything appears to be correct. Here's what I've tried so far. To assist me in achieving this, I am ut ...

javascriptjqueryhtmlcss

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

htmlcssangulartypescriptscroll