如何将作为logo的图片对齐到HTML页面所有内容的最上方

最简单的实现方法是修改logo外层链接的展示属性，让它独占一行，无需改动其他原有代码，有两种可选方案：

方案1：内联样式修改（最便捷，仅需修改1行代码） #

把你现有代码中header内的logo链接标签替换为以下代码即可：

<a href="https://www.ineedawheelchair.co.uk/" target="_blank" style="display:block; text-align:center; margin-bottom:25px;"><img src="../Documents/RMS Logo - Oval.png" width="300" height="175"></a>

改动说明： #

• 删掉了原img标签中拼写错误、且已被HTML标准废弃的align="centre"属性
• 给a标签加了display:block，让链接元素从默认的行内元素变为块级元素，独占整行，自然显示在下方所有内容的顶部
• text-align:center实现logo水平居中
• margin-bottom控制logo和下方输入区域的间距，你可以根据视觉需求调整数值

方案2：新增CSS规则（方便后续统一调整样式） #

在你现有<style>标签中新增以下规则：

header > a:first-of-type {
  display: block;
  text-align: center;
  margin-bottom: 25px;
}

效果和方案1完全一致，适合后续需要批量调整样式的场景。

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