Html 如何在中间放置两个div

我有一个项目，我的期末考试，需要在响应设计。我们还没有对这个主题做太多的介绍，也没有教我们javascript。我有点理解这个概念，但我在页面设计上面临着挑战

徽标应位于主导航之后，但也应位于搜索栏旁边。然而，搜索栏应该总是在标志的高度的中间，无论它是什么标志，它是多么宽或高，这两个宽度大约是63%个标志和31%个搜索栏+提交的BTN。我不能使用表格，因为对于移动设备，搜索栏必须位于徽标之下

如果这个问题是dump，我很抱歉，至少我确保在B）之前没有人问过它

谢谢你抽出时间

---

有几种方法可以做到这一点，但首先可以使用垂直对齐。这是我一直发现的CSS中的一个PITA

垂直对齐：

  #ex6     { height: 5em; line-height: 5em; }
  #ex6 *   { vertical-align: middle; }

  <div id='ex6'>
    <div class='lfloat'>lfloat</div>
    <div class='rfloat'>rfloat</div>
    <input type='checkbox'>
    <input type='text'>
    <span class='small'>small</span>
    <img src='avatar.gif'>
    normal
    <span class='large'>large</span>
  </div>

您可以将主容器设置为

display:table cell然后使用
垂直对齐：中间在你的搜索分区上。这在旧版本的IE中是不受支持的，但当你做出响应时，你无论如何都会遇到一些困难

.menuBar {
    display: table;
}

.logo, .search {
    display: table-cell;
    vertial-align: middle;
}

<div class="menuBar">
    <div class="logo">LOGO</div>
    <div class="search">SEARCH</div>
</div>

.menuBar{
显示：表格；
}
.logo、.search{
显示：表格单元格；
垂直排列：中间；
}
标志
搜寻

行高：

  #ex6     { height: 5em; line-height: 5em; }
  #ex6 *   { vertical-align: middle; }

  <div id='ex6'>
    <div class='lfloat'>lfloat</div>
    <div class='rfloat'>rfloat</div>
    <input type='checkbox'>
    <input type='text'>
    <span class='small'>small</span>
    <img src='avatar.gif'>
    normal
    <span class='large'>large</span>
  </div>

#ex6{高度：5em；线高度：5em；}
#ex6*{垂直对齐：中间；}
lfloat
游荡
小的
正常的
大的

可以在这里找到线条高度示例和其他示例-
它也必须导入CMS系统，高度未知，因此第一个示例非常棒，非常感谢！B） 只是应用了css的设计，这一切都很酷！！！祝你工作顺利！不客气。如果有帮助，请接受这一正确答案。