Having difficulty centering the main page

I currently have a WordPress main page where all the elements are aligned to the left. However, I would like to center them instead > .

Could someone kindly provide guidance on how to center everything?

Here is the code snippet from the main page:

<?php
/**
 * Template Name: Home page
 *
 *
 */

get_header(); ?>

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
    <td height="200" colspan="2" valign="bottom">
    </td>
</tr>
<tr>
    <td colspan="2" valign="bottom">
        <a href="<?php get_home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/destinations_top.jpg" alt="Architravel Destinations" width="518" height="56" border="0"> <div style="clear:both;"></div></a>
    </td>
</tr>
<tr>
    <td colspan="2" bgcolor="#506DAF">
        <img src="<?php echo get_template_directory_uri(); ?>/images/top.jpg" width="1230" height="257" alt="top" >
    </td>
</tr>
<tr>
    <td valign="top" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="405" height="102" valign="top" >
                <a href="http://www.architeam.org/#/projects" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/architeam.jpg" alt="Architeam Projects" width="410" height="102" border="0"></a>
            </td>
            <td valign="top">
                <img src="<?php echo get_template_directory_uri(); ?>/images/planebottom.jpg" align="left" alt="top_bottom">
            </td>
        </tr>
        </table>
        <a href="http://www.architeam.org/#/projects" target="_blank"></a>
    </td>
</tr>
<tr>
    <td colspan="2">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="50" colspan="10" valign="top">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td width="190" valign="top">
                &nbsp;
            </td>
            <td width="25" valign="top">
                <img src="<?php echo get_template_directory_uri(); ?>/images/doty.jpg" width="20" height="18" alt="doty">
            </td>
            <td valign="middle" style="vertical-align: middle;">
                 Last Destination: &nbsp;
            </td>
            <td width="350" valign="middle" style="vertical-align: middle;">
                <a href="/destinations/trips/los-angeles-las-vegas-san-francisco/" class="front">LOS ANGELES - LAS VEGAS - SAN FRANCISCO</a><br/>
            </td>
            <td width="25" valign="top">
                <img src="<?php echo get_template_directory_uri(); ?>/images/doty.jpg" width="20" height="18" alt="doty">
            </td>
            <td valign="middle" style="vertical-align: middle;">
                Destinations Archive: &nbsp;
            </td>
            <td valign="middle" style="vertical-align: middle;">
                                <a href="/destinations/trips/mexico/" class="front">MEXICO</a> |
                <a href="/destinations/trips/singapore-malaysia/" class="front">SINGAPORE - MALAYSIA</a> | 
                <a href="/destinations/trips/china" class="front">CHINA</a> | 
                <a href="/destinations/trips/brazil" class="front">BRAZIL </a> | 
                <a href="/destinations/trips/zaragoza-bilbao" class="front">ZARAGOZA - BILBAO</a> | 
                <a href="/destinations/trips/japan" class="front">JAPAN</a>
            </td>
        </tr>
        <tr>
            <td height="50" colspan="10" valign="top">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td valign="top">
                &nbsp;
            </td>
            <td colspan="3" valign="top">
                <a href="http://www.architravel.com/archipaper/" target="_blank" title="ArchiPaper"><img src="<?php echo get_template_directory_uri(); ?>/images/archipaper.jpg" alt="ArchiPaper" width="250" height="61" border="0"></a>
            </td>
            <td colspan="3" valign="center">
                <a href="http://www.architravel.com" target="_blank" title="ArchiTravel"><img src="http://www.architravel.com/destinations/wp-content/uploads/2016/06/ArchiTravel_LOGO.png" alt="ArchiTravel" width="250" height="68" border="10"></a>
                &nbsp;
            </td>
            <td valign="top">
                &nbsp;
            </td>
            <td valign="top">
                &nbsp;
            </td>
            <td valign="top">
                &nbsp;
            </td>
            <td valign="top">
                &nbsp;
            </td>
            <td valign="top">
                &nbsp;
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>
<?php get_footer(); ?>
htmlcsswordpressalignment

Answer №1

In order to prevent it from being overridden, I would recommend assigning it a unique ID within a div and adjusting the alignment of the div.

<div id='contentTable'>
    <table>
    </table>
</div>

After that, you can customize its style with

#contentTable{
    text-align:center;
}

Answer №2

Make this adjustment:

align="left"

Update it to:

align="center"

within your table.

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

Ensure that there are three unique JS code blocks in a single JS file, and avoid repetition of any block if it appears more than three times on

In my HTML page, I have 3 distinct blocks of code named block-1, block-2, and block-3 located in the file script.js. This script is called three separate times within the same page. I want to ensure that each block is executed only once based on the order ...

javascriptjqueryhtml

accept html elements within a textarea box

I am currently facing an issue with my text editor, TinyMCE, that I use on my website to allow users to input long descriptions. Whenever I attempt to submit the form, I receive an error message: A potentially dangerous Request.Form value was detected fro ...

c#htmlasp.net

How can I modify the color of the text in a Contact Form 7?

I am looking to update the text color in my Contact Form 7 code provided below. -------------- <label> Your name [text* your-name class:accent class:form-fluid ] </label> <label> Your email [email* your-email class:form-fluid] </lab ...

csscontact-form-7

Having difficulty with category level activation while implementing PHP page navigation with arrays and foreach loop

After receiving some excellent assistance from CBroe and @MeathCoder in a previous post, I managed to make some amazing changes. However, I'm currently facing an issue with setting the category as active. Here's the code snippet I'm working ...

phphtml

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

Alert: mssql_execute() encountered an issue and was unable to locate the stored procedure

Despite spending nearly a day trying to solve this issue, I am still unable to find a solution. I am encountering a problem with an MSSQL procedure in PHP. I have a form with 5 fields that calculate an "Amount." The procedure works perfectly in SQL Managem ...

phphtmlsql-serverwordpress

What is the process for linking my HTML page to my CSS stylesheet?

This is similar to what I have in the content of my HTML page. <link rel="stylesheet" type="text/css" href="/untitled2.css"> I thought this was right, but it doesn't seem to be functioning. Any ideas on what might be wrong? ...

htmlcss

Tips on utilizing ng-repeat to dynamically repeat table rows and incrementing the position value in ng-show rather than manually setting the values

I am currently working on a new feature that will allow users to customize their own tables. I would like to improve the structure of this code. My goal is to dynamically generate rows based on a maximum row value, and automatically increase the row posit ...

javascripthtmlangularjsvb.net

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

cssangulartwitter-bootstrap-4

Encountered an issue with CSS rendering for PDF files on Gitbook

I was able to use my CSS to customize the design of my Gitbook website. However, I struggled with implementing CSS for the PDF version. When I applied the same CSS used for the website to the PDF, the results were not consistent. It seemed like the CS ...

htmlcssgitpdfgitbook

What could be causing this Ajax request to come back with an error?

I am facing an issue with an AJAX request to a WordPress PHP function. The strange part is that the response is being treated as an error. However, when I check the error log, the responseText contains the requested JSON data, the status is 200, and statu ...

phpjqueryajaxwordpress

Displaying inner arrays in an Angular2 MatTable

Welcome to my initial post on Stack Overflow, where I hope to communicate my query clearly. I am currently attempting to develop a table with dynamic columns. However, I am encountering difficulty in comprehending how to bind matColumnDef to a specific el ...

htmlangulartypescripthtml-tableangular-material

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

Type of element returned

Is there a way to retrieve the element type? I'm interested in applying the style of a class to HTML5 elements without using the class attribute. <!DOCTYPE> <html> <head> <title>My page</title> </head& ...

javascriptjquerycsshtml

What is the best way to keep music playing continuously from a playlist?

Looking for a javascript function to continuously play music from a playlist. Simple Player <audio id="audio" preload="auto" tabindex="0" controls=""> <source type="audio/mp3" src="music/demo.mp3"> Sorry, your browser does not support ...

javascriptjqueryhtml

Utilizing the vh unit to vertically center a div

My approach to setting the height of my wrapper to 100vh in order to fill up the entire screen and then aligning a div vertically in the middle by setting it to 50% using position: relative, top, and transform (translateY) seems to be working perfectly o ...

htmlcss

What is causing the z-index: -1 to not function properly in this particular case?

I'm struggling to get the <i> element to display below the anchor in the stacking order. Any suggestions on how to achieve this? a.button { background-color: gray; border-radius: 5px; color: rgb(247, 247, 247); display: inline-block; ...

htmlcss

Adapting content based on various media queries

After spending more time on this question, I hope to clarify my thoughts better this time around. I am currently designing a responsive layout for my upcoming landing page. The main header in the body changes based on the browser size and device. <h1& ...

htmlcssmedia-queries

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Bizarre actions with jQuery append in Internet Explorer 8

Issue with adding elements to a div in IE8: The element is not added until the button is clicked twice, resulting in two new elements being added at once. Here's the code snippet in question: $(options.addButton).click(function(event) { var proto ...

javascriptjqueryhtmlcssinternet-explorer-8