text-align:center对header生效但content无效，求故障原因

核心问题出在标签的默认显示类型上：<content>不是HTML的标准内置标签，浏览器会把它当作行内元素处理；而<header>是HTML5的标准块级元素，两者的默认行为差异导致了显示效果不同。

具体差异 #

• <header>作为块级元素，默认会占满父容器的全部宽度，设置text-align: center后，内部文本会在整个容器宽度范围内居中，所以能看到明显的居中效果。
• <content>作为自定义行内元素，默认宽度只由自身内容的宽度决定，此时text-align: center不会产生视觉上的居中效果——因为元素本身的宽度和文本宽度完全一致，对齐操作看不出变化。

两种解决方式 #

1. 替换为标准块级标签（推荐）
   把自定义的<content>换成HTML标准的块级元素，比如<div>或者<section>，同时调整CSS选择器：

<div class="columnPages">
<header>This is the Header<br /><br /></header>
<div class="content">This is the content.</div>
</div>

.columnPages header {text-align: center;}
.columnPages .content {text-align: center;}

2. 强制将<content>转为块级元素
   如果一定要保留<content>标签，给它添加display: block属性，让它拥有块级元素的特性：

.columnPages header {text-align: center;}
.columnPages content {
  text-align: center;
  display: block;
}

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