HTML5如何设置对齐？

对齐

通过CSS的text-align属性控制文本水平对齐：

<p style="text-align: left;">左对齐（默认）</p>
<p style="text-align: center;">居中对齐</p>
<p style="text-align: right;">右对齐</p>
<p style="text-align: justify;">两端对齐（长段落适用）</p>

元素水平居中

行内/行内块元素

.container {
  text-align: center; /* 父元素设置 */
}
.child {
  display: inline-block; /* 子元素设为行内块 */
}

块级元素

.box {
  width: 300px;
  margin: 0 auto; /* 左右auto居中 */
}

垂直对齐

单行文本/行内元素

div {
  height: 100px;
  line-height: 100px; /* 行高=容器高度 */
}

• Flexbox方案（推荐）：

  

  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }

• Grid方案：

  

  .container {
    display: grid;
    place-items: center; /* 同时居中 */
  }

传统表格法

.container {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

复杂布局对齐

Flexbox 多轴对齐

.container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: flex-start; /* 垂直顶部对齐 */
}

CSS Grid 精确控制

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center; /* 垂直居中 */
  justify-items: end; /* 水平靠右 */
}

响应式对齐技巧

@media (max-width: 768px) {
  .responsive-box {
    text-align: center; /* 小屏幕居中对齐 */
    margin: 0 auto;
  }
}

注意事项

1. 浏览器兼容性：
   • Flexbox兼容IE10+，Grid兼容现代浏览器
   • 传统方法（如float）仍可用于旧项目
2. 优先级：
   • 避免过度使用!important
   • 内联样式 > ID选择器 > 类选择器
3. 语义化：
   • 使用<main>, <section>等HTML5标签增强结构清晰度

最佳实践建议

• 移动优先：优先设计小屏对齐，再通过媒体查询扩展
• Flexbox首选：简单布局用Flexbox，复杂网格用Grid
• ：对不确定高度的元素使用Flex/Grid的align属性
• 可访问性：确保对齐不影响阅读顺序（如RTL语言需调整）

参考权威文档：

• MDN Web Docs: CSS Layout
• W3C规范: Flexbox, Grid
• Google Web Fundamentals: Responsive Layouts

通过合理选择对齐方法，可显著提升页面专业性与用户体验，建议通过浏览器开发者工具实时调试,确保跨设备一致性。