Bootstrap自定义CSS定位问题：搜索框与标题垂直对齐异常

我来帮你搞定这个布局问题！你遇到的核心问题是块级元素的默认行为和浮动布局的副作用导致的：<h1>是块级元素，默认会占满整行宽度，所以你的搜索框只能被挤到下一行；而直接用float:right时，父容器#logoRow没有合适的布局约束，导致搜索框脱离正常流，跑到下方导航栏的区域里。

下面是具体的解决方法，用Flexbox布局就能轻松实现需求，完美兼容Bootstrap 3：

步骤1：修改#logoRow的CSS #

给父容器添加Flex布局，实现子元素的水平排列和垂直居中：

#logoRow {
  display: flex;
  align-items: center; /* 让标题和搜索框垂直居中对齐 */
  justify-content: space-between; /* 标题靠左，搜索框靠右 */
  padding: 10px 15px; /* 可选，添加内边距避免内容贴边 */
}

步骤2：调整.searchBar和<h1>的样式 #

去掉可能干扰布局的浮动和多余边距，同时优化标题的默认间距：

.searchBar {
  width: 250px;
  margin: 0; /* 去掉默认margin，避免偏移 */
}

#logoRow h1 {
  margin: 0; /* 移除h1默认的上下margin，让垂直居中更精准 */
}

修改后的完整logoRow部分代码 #

<div id="logoRow" >
  <h1>Art Store</h1>
  <form class="searchBar">
    <div class="input-group locationSearch">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

为什么这个方法有效？ #

Flexbox是专门为布局设计的CSS模块，它能让父容器的子元素轻松实现水平/垂直排列、对齐，完全不需要依赖浮动。这样既解决了块级元素独占一行的问题，又避免了浮动带来的元素脱离正常流、布局混乱的问题。

如果你因为某些原因不能用Flexbox（比如兼容极老浏览器），也可以用display: inline-block的替代方案：

#logoRow {
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
  padding: 10px 15px;
}

#logoRow h1 {
  display: inline-block;
  margin: 0;
  vertical-align: middle; /* 垂直居中 */
}

.searchBar {
  width: 250px;
  float: right;
  vertical-align: middle;
}

不过Flexbox的方案更简洁可靠，优先推荐使用。

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