Material Design Lite作品集模板：Header宽度调整问题求助

我来帮你搞定这个MDL（Material Design Lite）Header的宽度调整和居中问题～你之前尝试直接加width但没居中，核心原因是没处理MDL Header默认的定位特性，下面是具体的解决思路和代码修改方案：

核心问题分析 #

MDL的.mdl-layout__header默认是固定定位（fixed）（当使用标准布局时），这种定位的元素脱离了文档流，普通的margin: 0 auto是无法让它居中的，而且内部的header行也需要同步适配宽度，避免内容溢出。

具体修改步骤 #

1. 调整Header的宽度与居中（针对固定定位场景） #

用你的自定义类.portfolio-header来修改（优先级比MDL默认类更高），通过left: 50% + transform: translateX(-50%)实现居中，同时设置宽度：

.portfolio-header {
  position: fixed; /* 保留MDL默认的固定定位，若不需要固定可改为relative */
  width: 70%; /* 你想要的宽度，也可以用max-width: 1200px; 适配响应式 */
  left: 50%;
  transform: translateX(-50%);
  /* 保留你原来的背景图设置 */
  background-image: url(../images/pink-polka-dot-header-bg.jpg);
}

2. 适配Header内部的内容行 #

确保内部的.mdl-layout__header-row和Header同宽，避免内容超出边界：

.portfolio-header .mdl-layout__header-row {
  width: 100%;
  box-sizing: border-box; /* 防止padding撑宽元素 */
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; /* 保留你原来的居中对齐 */
}

3. 小屏幕响应式适配 #

在小屏幕下建议恢复Header全屏宽度，保证移动端体验：

@media (max-width: 768px) {
  .portfolio-header {
    width: 100%;
    left: 0;
    transform: none; /* 取消居中变换 */
  }
}

4. 保留原有自定义样式 #

把你之前写的其他样式（比如logo、行高相关）保留，最终完整的CSS如下：

/* 核心Header调整 */
.portfolio-header {
  position: fixed;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/pink-polka-dot-header-bg.jpg);
}

.portfolio-header .mdl-layout__header-row {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .portfolio-header {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* 原有自定义样式 */
.mdl-layout__title {
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}
.is-compact .mdl-layout__title span {
  display: none;
}
.portfolio-logo-row {
  min-height: 250px;
}
.is-compact .portfolio-logo-row {
  min-height: auto;
}
.portfolio-logo {
  background: url(../images/sft-logo.png) 50% no-repeat;
  background-size: cover;
  height: 250px;
  width: 469px;
  margin: auto auto 10px;
}
.is-compact .portfolio-logo {
  height: 79px;
  width: 150px;
  margin-top: 7px;
}

为什么之前的尝试没生效？ #

• 固定定位的元素无法用margin: 0 auto居中：fixed定位脱离文档流，必须通过left:50%加水平位移来实现居中。
• 未同步调整内部行宽度：即使Header宽度受限，内部行默认是100%宽度，但如果不设置box-sizing: border-box，padding可能会撑宽元素，导致内容溢出。

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