HTML中如何让文本框与图片处于同一水平线上对齐？

问题原因 #

• 你将logo和搜索框分别放在独立的<tr>标签中，<tr>是表格行标签，本身就会换行显示，自然无法横向排列
• 全局CSS中给所有img设置了display: block和上下46px外边距，块级元素默认独占一行，也会导致元素无法同行
• 顶部容器未设置横向布局规则，无法自动处理元素对齐逻辑

解决方案 #

采用Flex布局实现，代码如下：

替换原有HTML代码

<head>
  <link rel="stylesheet" type="text/css" href="Zaxent Stylesheet.css">
  <style>
    #top {
      background-color: rgb(181, 230, 29);
      margin: 0;
      display: flex;
      align-items: center;
      padding: 8px 16px;
      min-height: 56px;
      position: relative;
    }
    #top .site-logo {
      height: 40px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #top .search-bar {
      margin-left: auto;
      border-radius: 20px;
      border: 2px solid rgb(34, 177, 76);
      padding: 6px 12px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="top">
    <img class="site-logo" src="Zaxent logo 2.png" alt="站点logo">
    <input class="search-bar" name="search bar search page" placeholder="搜索">
  </div>
</body>

调整原有全局CSS

将原CSS中全局img的规则调整为仅作用于正文图片，避免影响顶部logo：

/* 原代码是img { ... }，改为如下形式，.content为你正文容器的类名，可根据实际修改 */
.content img {
  display: block;
  margin: 46px auto;
}

效果说明 #

• 顶部栏背景色保留原有设置
• logo完全居中显示
• 搜索框居右排列，和logo垂直居中对齐
• 后续可直接在#top容器内添加左侧菜单、右侧功能按钮等元素，布局会自动适配

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