如何定位两个div中间的内容

我有一个需要在响应式设计中进行最终决策的项目。关于这个问题，我们没有涉及太多，还没有人向我们传授JavaScript。我喜欢这个概念，但我在页面设计中遇到了一个挑战。如何定位两个div中间的内容

该徽标应该在主导航之后，但也与搜索栏一起。然而，搜索栏应始终位于徽标高度的中间，无论它是什么标志以及它的宽度或高度如何，两者的宽度大致分别为63％徽标和31％搜索栏+ submitt btn。我无法使用表格，因为对于移动设备，搜索栏必须属于该徽标。

我很抱歉，如果问题是转储，至少我确信它没有被B之前问）

谢谢您的时间！

page layout

来源

2012-07-17 troty_master

有几个方法可以做到这一点，但开始与您可以使用Vertial对齐。这是我一直发现的CSS中的PITA。

Vertial对齐：

您可以将主容器设置为display: table-cell;，然后在搜索DIV使用vertial-align: middle;。这在老版本的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>

线高度：

#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>

行高度榜样，其他人可以在这里找到 - http://codeincomplete.com/posts/2011/3/20/css_vertical_align/

来源

2012-07-17 09:55:50 SpaceBeers

它导入到一个CMS系统，以及和高度将是不明，所以第一个是伟人，非常感谢！ B）刚刚应用与设计的CSS，它很酷！祝你工作顺利！ – 2012-07-17 11:06:33

不客气。如果有帮助，请接受这是正确的答案。 – SpaceBeers 2012-07-17 11:07:01

如何定位两个div中间的内容

回答

相关问题