如何将50%宽度的hr元素定位到footer文本上方？

数据老陈

2026-8-2

问题分析

text-align:bottom 是无效设置——这个属性仅用于控制文本内容的对齐方式，对<hr>元素的位置没有作用。你的<hr>位置过高，核心原因是浏览器给<hr>默认设置了上下外边距（margin），导致它和下方footer之间产生了多余间距。

解决方案

方案1：调整HR的外边距

直接修改<hr>的margin样式，移除多余的上方间距，同时保持50%宽度的居中对齐：

<hr style="width:50%; margin: 0 auto 1rem auto;" />

<div class="footer">
  Gemacht mit <span class="herz">❤</span> von
  <a href="https://fastdropgaming.github.io">
    <span class="fl">FastDrop Gaming</span>
  </a>
  
  <div>
    <small>&copy; <script src="assets/js/year.js"></script> FastDrop Gaming. Alle Rechte vorbehalten.</small>
  </div>

  <div>
    <small><a href="https://fastdropg.carrd.co/impressum">Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Kontakt</a> ● <a href="https://fastdropg.carrd.co/privacy">Datenschutz</a></small>
  </div>
</div>

margin: 0 auto 1rem auto; 含义：上下外边距设为0和1rem（可根据视觉需求调整数值），左右自动居中，让<hr>紧贴footer上方的同时保持居中效果。

方案2：将HR嵌入Footer内部

从结构上把<hr>放到footer容器内作为第一个子元素，增强布局关联性，避免外部样式干扰：

<div class="footer">
  <hr style="width:50%; margin: 0 auto 1rem auto;" />
  Gemacht mit <span class="herz">❤</span> von
  <a href="https://fastdropgaming.github.io">
    <span class="fl">FastDrop Gaming</span>
  </a>
  
  <div>
    <small>&copy; <script src="assets/js/year.js"></script> FastDrop Gaming. Alle Rechte vorbehalten.</small>
  </div>

  <div>
    <small><a href="https://fastdropg.carrd.co/impressum">Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Kontakt</a> ● <a href="https://fastdropg.carrd.co/privacy">Datenschutz</a></small>
  </div>
</div>