本文详解为何 text-align: right 无法让块级 div 右对齐，以及如何通过现代 CSS Flexbox 实现左右两个圆形导航按钮的简洁、健壮布局。
本文详解为何 `text-align: right` 无法让块级 div 右对齐，以及如何通过现代 css flexbox 实现左右两个圆形导航按钮的简洁、健壮布局。
默认情况下，<div> 是块级元素，会独占一行并自动撑满父容器宽度（100%）。因此，即使你为 .proximo 设置了 text-align: right，它本身仍占据整行，且内部文本/内联内容（如 <img>）才受 text-align 影响——而整个 div 并不会因此“右移”。这就是问题根源。
推荐解法是采用 Flexbox 布局：将两个按钮置于同一弹性容器中，并利用 justify-content: space-between 自动分配两端间距。这不仅语义清晰、代码简洁，还具备天然的响应式鲁棒性。
✅ 推荐方案（直接作用于 <main>）：
main {
display: flex;
justify-content: space-between;
align-items: center; /* 垂直居中（可选，提升视觉一致性） */
padding: 0 16px; /* 可选：避免按钮紧贴视口边缘 */
}
main div.voltar,
main div.proximo {
height: 52px;
width: 52px;
background-color: #D9C2A7;
border-radius: 50%;
padding: 3px;
box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
/* 移除冗余的 text-align，flex 已接管对齐逻辑 */
}✅ 兼容性更强的方案（不修改 <main> 显示模式）：
若 <main> 已有其他样式依赖（如需保持 block 行为），可新增一层包裹容器：
<main>
<div class="nav-wrapper">
<div class="voltar">
<abbr title="Página dos desafios">
<a href="../index.html" target="self" rel="prev">
<img src="../imagens/volta.png" alt="Voltar">
</a>
</abbr>
</div>
<div class="proximo">
<abbr title="Módulo 2">
<a href="../modulo-2/modulo2.html" target="_self" rel="next">
<img src="../imagens/frente.png" alt="Próximo">
</a>
</abbr>
</div>
</div>
</main>对应 CSS：
main .nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
/* .voltar 和 .proximo 样式保持不变（同上） */⚠️ 注意事项：
- 避免滥用 float 或 position: absolute —— 它们破坏文档流，增加维护成本；
- 为 <img> 添加 alt 属性，提升可访问性（示例中已补充）；
- 若需在小屏幕上堆叠按钮，可结合媒体查询添加 flex-direction: column；
- align-items: center 能确保两个按钮在垂直方向上对齐，尤其当图标尺寸或内边距存在微小差异时更显专业。
Flexbox 不仅解决了当前对齐问题，更为未来扩展（如添加禁用态、加载动画、焦点轮廓等）提供了清晰、可预测的布局基础。
