如何在超链接上方居中放图片及文本并显示在橙色导航栏前方

看起来你是想把logo和两段文本放在导航栏的橙色背景区域里（也就是超链接的上方，而不是导航栏外面），现在内容跑到导航栏上方是因为它们的HTML结构不在导航栏容器内，再加上导航栏用了浮动布局，导致外部元素无法被包含进去。我来帮你调整代码：

第一步：修正HTML结构 #

把logo和文本放到导航栏的<ul>内部，作为一个单独的列表项，这样它们就属于橙色导航栏的一部分了。同时清理多余的<div>，并把CSS放到<style>标签里：

<html>
<head>
<title> Malta Youth Group</title>
<style>
/* 这里放修改后的CSS代码 */
</style>
</head>
<body>
<ul id="nav">
  <!-- 新增的导航头部：包含logo和两段文本 -->
  <li class="nav-header">
    <img id="Logo" src="campfire1.png" alt="campfire logo" height="42" width="42">
    <p>这里是第一段文本</p>
    <p>这里是第二段文本</p>
  </li>
  <!-- 导航链接组 -->
  <li><a href="#">About Us</a></li>
  <li><a href="#">Latest activities</a></li>
  <li><a href="#">How to join</a></li>
  <li><a href="#">Contact us</a></li>
</ul>
</body>
</html>

第二步：调整CSS布局 #

用Flex布局来控制导航栏的垂直结构，让logo+文本在上方居中，导航链接在下方均匀分布，同时修正原来的浮动和内边距问题：

#nav {
  width: 100%; /* 改成100%避免横向滚动，更适配页面 */
  height: auto; /* 自动适应内容高度，不要固定死150px */
  padding: 0;
  list-style: none;
  background-color: darkorange;
  display: flex;
  flex-direction: column; /* 让列表项垂直排列：头部在上，链接在下 */
  align-items: center; /* 所有内容水平居中 */
}

/* 控制导航头部的样式 */
#nav .nav-header {
  margin: 15px 0; /* 上下留间距，避免贴边 */
  text-align: center; /* 内部图片和文本居中 */
}

#nav .nav-header img {
  display: block;
  margin: 0 auto 8px; /* 图片居中，和下面文本留间距 */
}

#nav .nav-header p {
  margin: 5px 0; /* 两段文本之间的间距 */
  color: #069; /* 和链接颜色保持一致，视觉统一 */
  font-weight: bold;
}

/* 导航链接组：改成横向排列 */
#nav li:not(.nav-header) {
  display: inline-block;
  margin: 0 30px; /* 链接之间的间距 */
}

#nav li a {
  display: block;
  padding: 10px 20px; /* 调整内边距，避免原来的超大间距 */
  text-decoration: none;
  font-weight: bold;
  color: #069;
  font-size: 25px;
}

#nav li a:hover { /* 修正你原来的语法错误，添加hover效果 */
  color: blue;
  background-color: darkorange;
}

为什么这样改？ #

1. 结构调整：把logo和文本放到<ul id="nav">内部，它们就会继承导航栏的橙色背景，不会跑到外面去。
2. Flex布局：用flex-direction: column让导航栏内容垂直分布，align-items: center轻松实现居中，比浮动布局更灵活可控。
3. 间距优化：去掉了原来不合理的margin-right:284px，用margin:0 30px控制链接间距，适配不同屏幕。
4. 自适应高度：把height:150px改成auto，导航栏会自动根据内部内容调整高度，不会出现内容溢出或留白过多的问题。

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