如何实现页面顶部居中链接与右上角购物车图标同行显示？

你可以通过绝对定位配合相对定位容器实现标题居中、购物车居右且同行的效果，同时简化冗余的HTML结构：

修改后的HTML代码 #

<div class="header-container">
  <h1>
    <a class="itemLink" href="../index.html">Island Time</a>
  </h1>
  <img class="cartImg" src="assestsForProductsPage/shopping-cart-icon.jpeg" alt="ShoppingCart">
</div>

修改后的CSS代码 #

.header-container {
  position: relative;
  text-align: center;
  padding: 0 15px; /* 给购物车预留右侧空间 */
}

.itemLink {
  text-decoration: none;
  color: black;
}

.cartImg {
  width: 5%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%); /* 让购物车垂直居中对齐标题 */
}

h1 {
  margin: 0; /* 移除h1默认上下外边距，让头部更紧凑 */
}

关键改动说明 #

1. 给最外层容器加position: relative，作为购物车绝对定位的参考坐标系
2. 废弃<center>标签，用text-align: center实现标题居中（符合现代Web标准）
3. 购物车通过position: absolute固定在右上角，top:50%+transform: translateY(-50%)实现垂直居中，和标题对齐
4. 移除多余嵌套div，简化DOM结构
5. 设置购物车height: auto，避免图片因固定高度变形

如果偏好Flex布局，也可以用以下CSS实现相同效果：

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 15px;
}

.cartImg {
  width: 5%;
  height: auto;
  position: absolute;
  right: 15px;
}

/* 其他样式保持不变 */

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