Pug文件响应式头部布局咨询：固定边距与居中标题

Hey there! Let’s work through your layout problems step by step, with fixes tailored to your Pug setup:

1. Fixed Side Margins for Page Header (Any Browser Size) #

To keep consistent left/right margins on your header no matter how the viewport resizes, use fixed horizontal margins in CSS. Here’s how to integrate this into your template:

First, update your layout.pug to add a styled header container:

doctype html
html(lang='en')
  head
    include includes/head.pug
    style.
      /* Add this CSS (or put it in your external stylesheet) */
      .site-header {
        margin: 0 2rem; /* Adjust 2rem to your preferred margin size */
        padding: 1rem 0; /* Optional: Add vertical padding for breathing room */
        background: #f5f5f5; /* Optional: Visualize the header boundary */
      }
  body
    header.site-header
      //- Your header content (logo, nav links, etc.) goes here
    main
      //- Page content including your centered title

This ensures the header will always maintain that fixed side spacing—no need for fixed widths; it’ll naturally take up the available viewport space minus the margins.

2. Always-Centered Page Title #

For a title that stays perfectly centered regardless of screen size, you have two straightforward options:

Option A: Simple Text Alignment (Great for Block-Level Titles) #

If your title is a block element like <h1>, just use text-align: center:

// Inside your main content area
h1.page-title My Centered Title

// Add this CSS
style.
  .page-title {
    text-align: center;
    margin: 2rem 0; /* Add vertical spacing to avoid crowding */
  }

Option B: Flexbox (For Full Control, Including Vertical Centering) #

If you want the title centered both horizontally and vertically (or need more layout flexibility), wrap it in a flex container:

main.page-content
  .title-wrapper
    h1.page-title My Centered Title

// CSS
style.
  .page-content {
    min-height: calc(100vh - 8rem); /* Adjust based on header/footer height */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-title {
    margin: 0; /* Remove default margins to eliminate extra space */
  }

Fixing the "Title Getting Pushed Down" Issue #

The most common causes for this squeeze are default browser styles or margin collapse. Here’s how to fix it:

• Reset default styles: Browsers add default margins to elements like <body> or <h1>. Start with a universal reset to eliminate unexpected spacing:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• Avoid margin collapse: If your header’s bottom margin merges with the title’s top margin, use padding on the header for vertical spacing instead, or add overflow: auto to the header to prevent collapse.
• Fixed header adjustment: If your header is fixed to the top, add padding to the <main> element equal to the header’s total height to push content down properly:

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 2rem;
    /* ... other header styles */
  }
  main {
    padding-top: 6rem; /* Match this to your header's total height */
  }
  

Final Updated layout.pug Example #

Putting it all together, your template might look like this:

doctype html
html(lang='en')
  head
    include includes/head.pug
    style.
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .site-header {
        margin: 0 2rem;
        padding: 1.5rem 0;
        background: #f0f0f0;
      }
      .page-title {
        text-align: center;
        margin: 3rem 0;
        font-size: 2.5rem;
      }
  body
    header.site-header
      p Header content here (logo, navigation, etc.)
    main
      h1.page-title My Always-Centered Title
      //- Rest of your page content

内容的提问来源于stack exchange，提问作者xiaolingxiao