Web Development·12,159 discussions

[kees_b]

How to Setup Table of Content & Headings alignment in Center

Locked

Tags: Software, Web development

Hi seniors,
Hope you’re doing well,
I have a website and i am trying to setup post page under WP settings but unable to apply the following features,

1. All the headings including H2,H3,H4 showing in center alignment but i am looking for left align.

2. I installed the “Easy Table of Content Plugin” to setup table of content but it only counting the main heading and showing rest of the headings under main heading, counting only main heading number “1” and all others 1.2,1.3,1.4 but i want this numbers like 1,2,3,4,5

anyone please suggest solutions for above two problems

Note: unclear link removed by moderator as spam.

Thanks

• This topic was modified 2 years, 4 months ago by kees_b.

Topic

Reply To: How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

Select the text that you want to center, and then click Paragraph on the Format menu. On the Indents and Spacing tab, change the setting in the Alignment box to Centered, and then click OK.

How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

To set up a table of contents (TOC) and headings alignment in the center, you will need to use HTML and CSS. Here’s an example of how you can accomplish this:

1. In your HTML file, create a container element (such as a div) to hold your TOC. Inside this container, create a ul element to hold your list of headings. Each heading should be a li element.

<div class=”toc-container”>

• Heading 1
• Heading 2
• Heading 3

</div>

1. In your CSS file, add styles to center the TOC container and its list of headings. You can use the text-align property to center the container element, and the margin property to center the list of headings.

.toc-container {
text-align: center;
}

.toc-container ul {
margin: 0 auto;
}

1. You can also add styles to center the headings individually if they are wrapped in a div or p element:

.heading{
text-align:center;
}

1. You can also add styles to customize the look and feel of your TOC. For example, you can change the font size, color, and font family of the headings

.toc-container ul li {
font-size: 20px;
color: blue;
font-family: Arial, sans-serif;
}

This is a basic example of how to set up a table of contents and center the headings using HTML and CSS. You can adjust the styles as needed to fit the specific design of your website.
.

Heading alignment in HTML

In reply to How to Setup Table of Content & Headings alignment in Center

To set the heading alignment in HTML, we use the style attribute inside an HTML element. The attribute is used with the HTML <h1> to <h6> tag

Reply To: How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

You can change the alignment of headings on your website by using the CSS of your theme. You can do this by going to Appearance > Editor in your WordPress dashboard and finding the CSS file that controls the headings. It will set the text-align property for headings and change it from “center” to “left”.

Reply To: How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

Hi JulianLimaCosta,

Regarding your first issue of center alignment, you can try adding the following CSS code to your website’s stylesheet:

h2, h3, h4 {
text-align: left;
}

This should align all headings from H2 to H4 to the left.

Regarding your second issue with the “Easy Table of Content Plugin”, you can try checking the plugin’s settings to see if there are any options to change the numbering format. If not, you can try using a different table of contents plugin that allows for custom numbering formats.

Hope this helps! Let me know if you have any further questions.

Use the HTML code

In reply to How to Setup Table of Content & Headings alignment in Center

Firstly, you don’t need any plugins for creating the table. Better use HTML Code. It will be much better for page loading.

How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

First of all select the text which you want to center, then click the Paragraph on the Format menu. On the Indents and Spacing tab, change the setting in the Alignment box to Centered, and then click OK.

Reply To: How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

To left align headings in WordPress:

Find the CSS class or ID for the headings (e.g., h2, h3, h4).
Add custom CSS code to your theme or child theme’s style.css file: set “text-align” property to “left” for the desired class or ID.
For adjusting numbering in “Easy Table of Content Plugin”:

Go to the plugin settings in WordPress dashboard.
Look for numbering or hierarchical display options.
Change the format to use desired numbering (e.g., 1, 2, 3, 4, 5).
Save changes and refresh the page to see updated numbering.

[kees_b]

Reply To: How to Setup Table of Content & Headings alignment in Center

In reply to How to Setup Table of Content & Headings alignment in Center

If you want to left-align headings in WordPress, follow these steps:

Identify the CSS class or ID for the headings you want to modify (e.g., h2, h3, h4).
Add custom CSS code to either your theme’s style.css file or your child theme’s style.css file. Set the “text-align” property to “left” for the desired class or ID.
Additionally, if you need to adjust the numbering in the “Easy Table of Content Plugin,” here’s what you can do:

Access the plugin settings from your WordPress dashboard.
Look for options related to numbering or hierarchical display.
Modify the format to use your desired numbering style (e.g., 1, 2, 3, 4, 5).
Remember to save the changes and refresh the page to see the updated numbering. These adjustments will help you customize your headings and numbering precisely as you need them for your website.

Note: commercial link removed by moderator.

• This reply was modified 1 year, 9 months ago by kees_b.
• This reply was modified 1 year, 9 months ago by kees_b.

[Author]

Replies