BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty seventeen

How to Center Elements in the Twenty Seventeen Theme: A Complete Guide

26 threads Sep 16, 2025 Theme → Twenty seventeen

Content

One of the most common questions from users of the Twenty Seventeen theme is how to center various elements on their website. Whether it's the social links menu, the site title, page content, or the main navigation, many users find the default left alignment isn't quite right for their design.

This guide compiles the most effective solutions from the community to help you center elements in your Twenty Seventeen theme.

Why Centering Can Be Challenging

The Twenty Seventeen theme uses a specific CSS structure that controls element alignment. Simply using text-align: center; doesn't always work because many elements have fixed widths, flexbox containers, or other layout constraints that override basic alignment properties.

Common Centering Solutions

1. Centering the Social Links Menu in Footer

To center the social icons in your footer, add this CSS to Appearance → Customize → Additional CSS:

.social-navigation {
    width: 100% !important;
    text-align: center !important;
}

.social-navigation .menu {
    display: inline-block;
    float: none;
}

2. Centering the Top Navigation Menu

For the main navigation menu, try this CSS approach:

.navigation-top {
    text-align: center;
}

.navigation-top .wrap {
    max-width: 100%;
    display: inline-block;
    float: none;
}

3. Centering Page/Post Content

To center your main content area when using no sidebar:

.page .entry-header,
.single .entry-header,
.entry-content {
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align: center;
}

4. Centering the Site Title

To center your site title and tagline:

.site-branding {
    text-align: center;
    margin: 0 auto;
}

.site-title,
.site-description {
    text-align: center;
    margin: 0 auto;
}

Important Notes

Before making these changes:

  • Use a Child Theme: Always use a child theme when modifying theme files to preserve your changes during updates.
  • Clear Your Cache: After adding CSS, clear your browser cache and any caching plugins to see the changes.
  • Test Responsiveness: Check how your changes look on different screen sizes. You may need to add media queries for mobile devices.

These solutions address the most common centering requests for the Twenty Seventeen theme. The exact CSS needed may vary slightly depending on your specific setup and any other customizations you've made.

Related Support Threads Support