.PageList, .PageList ul { text-align: center !important; } and changes the list items to display: inline-block !important; float: none !important;. This completely breaks the built-in left-float lock and forces your entire navigation menu rows to balance evenly across the screen.
Centralize Blogger page tab
By default, the Blogger navigation menu automatically aligns your page tabs to the left side of your layout.
While this default setup functions well, it often leaves your header area looking unbalanced, lopsided, or unprofessional.
This comprehensive step-by-step tutorial is not only shows you how to centralize the page tab, but also the full tips how to set it up.
That includes how to access the template layout settings, add your items, and then how and where to inject the precise CSS overrides needed to force those stubborn left-aligned tabs directly into the center of your blog.
Phase 1: Preparing navigation content
Before you can center your navigation menu, you need to create the actual tabs that will sit in that middle layout row.
You cannot build a menu out of items that do not exist yet.
Step 1: Creating static pages
- Log in to your Blogger Dashboard.
- On the left-hand sidebar, click on Pages (not Posts).
- Click the + New Page button at the top left.
- Enter a clear menu title (e.g.,
About Me,Contact Us,Privacy Policy). - Add your basic content into the text editor, then click Publish.
Step 2: Gathering label URLs (For category tabs)
If you want a centered tab to display a specific topic or category (e.g., a "Travel" tab), you must link directly to that label URL string:
- Go to your live blog and click on any post label tag.
- Look at your browser's address bar and look for a URL path formatted like this:
https://blogspot.com - Copy this entire URL destination rule. We will use it as a custom link targets block in Phase 2.
Phase 2: Adding and configuring the Page List widget
With your destination pages prepared, you can now add the navigation gadget into your main layout skeleton.
Step 1: Locate the Layout editor
Navigate to the Layout tab in your Blogger sidebar menu.
Look for an structural element section near the very top of your page template grid labeled Top Menu, Cross-Column, Header, or Main Navigation.
Step 2: Add the Pages gadget
- Click the Add a Gadget link text located inside that top row slot.
- A selection pop-up window will open up. Scroll through the widget options list and select Pages (this acts as your Page Tab structural organizer).
Step 3: Selecting and ordering menu items
- Pages to show: Check the square boxes next to any static items you built in Phase 1 to activate them.
- Adding custom topic tabs: Click + Add external link to build category buttons. Type your item name (e.g.,
Recipes) into the Page Title field, paste the label URL you copied earlier into the Web Address field, and click Save Link. - Sorting the sequence: Hover your mouse cursor over any menu item until a crosshair icon appears. Click and drag the page entries up or down to set their final left-to-right reading flow order.
- Click the main Save button on the configuration pop-up form.
Phase 3: Forcing the page tabs to the center using CSS
Now that your menu is saved, it will currently sit anchored over to the left side of your blog page.
To completely override this alignment block and snap your menu items straight into the middle, follow these exact code steps.
Where to inject the centralization CSS
Go to your Theme workspace dashboard tab.
Click the tiny dropdown arrow next to the orange Customize button.
Choose Advanced > Add CSS. Copy the exact code block below and paste it directly into the code box area:
text-align: center !important;
}
.PageList li {
display: inline-block !important;
float: none !important;
}
Below ia another version, but more detailed and stylish page tab or navigation menu.
/* 1. Center the Main Page Tab Layout Box Container */ .PageList { text-align: center !important; width: 100%; background-color: #333333; /* Dark menu row accent styling */ padding: 12px 0; } /* 2. Strip Defaults and Set the Main Unordered List to Center Alignment */ .PageList ul { text-align: center !important; padding: 0 !important; margin: 0 !important; list-style: none !important; display: block !important; } /* 3. Kill the Default Left-Float and Force Items Inline-Block */ .PageList ul li { display: inline-block !important; float: none !important; /* This breaks the default left-side layout lock */ margin: 0 5px !important; } /* 4. Format and Polish the Centralized Tab Web Links */ .PageList ul li a { color: #ffffff !important; /* White link text block */ font-weight: 600; padding: 10px 18px; text-transform: uppercase; font-size: 14px; text-decoration: none; transition: all 0.3s ease; display: inline-block; } /* 5. Add a Dynamic Color Hover Effect for Centered Tabs */ .PageList ul li a:hover { background-color: #e65100; /* Smooth contrast focus highlight color */ color: #ffffff !important; }
It is one single navigation menu design split into five numbered code parts.
Each numbered section handles a different job for that same menu:
- Parts 1, 2, and 3 clear out Blogger's old layout and center the bar.
- Part 4 styles the text and buttons.
- Part 5 creates the orange color change when a mouse hovers over it.
They all work together to create a single, dark-grey menu bar with centered, uppercase links.
Troubleshooting alignment and display conflicts
If your tabs continue to behave strangely or refuse to shift, you may be running into standard theme CSS layout constraints:
1. The menu tabs are still clinging hard to the left margin
Some custom premium themes use modern flex properties or heavily engineered float: left; rules inside hidden parent blocks.
If your items won't budge, look closely at our CSS block: notice the inclusion of the !important tag on the text-align and float: none; properties.
This modifier signals to the browser engine that it must absolutely discard any default theme scripts in favor of your alignment commands.
2. The Page List links stack vertically instead of sitting side-by-side
If your tab entries appear stacked like a vertical bulleted checklist right in the center of your header, your template code has likely targeted the list block with a display: block; override.
Ensure that the .PageList ul li structural sector inside your Advanced CSS editor contains the exact display: inline-block !important; tag to maintain the side-by-side horizontal alignment flow.
Conclusion: How to place Blogger page tab in the center
By moving your Blogger Page Tabs away from the default left-hand alignment boundary and centralizing them, you instantly elevate your entire website identity layout.
Centered navigation structures look incredibly balanced, balance out heavy sidebar columns cleanly, and provide a familiar, accessible map for your readers to browse through.
Check back and update your customized link labels periodically as your publishing categories continue to grow!