Question

DIV中嵌套一个ul与一个子div，怎么垂直对齐居中？

代码如下，得到的效果是菜单一和菜单二是对齐的，但是模拟搜索栏和菜单一、二对不齐效果如图，如果要对齐应该怎么设置呢，请高手赐教，小弟菜鸟css还不太懂！
<div style="width:800px; height:50px; background:#FCF; margin: 0 auto;"> <ul style="margin-top: 10px;"> <li style="width:100px; height: 30px; background:#936; float:left;">菜单一</li> <li style="width:100px; height: 30px; background:#0F3; float:left;">菜单二</li> </ul> <div style="width: 300px; margin-top: 10px; height: 30px; background:#FF0; float:left;"> 模拟搜索栏 </div></div>
没有一个说得对的，虽然我很想采纳了了结这个问题，但是我这样采纳了不是误导其他人吗，唉....

实际上我自己反复试出来了，最后的代码只需要在ul中增加一个 float:left就OK了，正确代码如下：

<div style="width:800px; height:50px; background:#FCF; margin: 0 auto;">
<ul style="margin-top: 10px; float:left;">
<li style="width:100px; height: 30px; background:#936; float:left;">菜单一</li>
<li style="width:100px; height: 30px; background:#0F3; float:left;">菜单二</li>
</ul>
<div style="width: 300px; margin-top: 10px; height: 30px; background:#FF0; float:left;"> 模拟搜索栏 </div>
</div>

Answer 1

修改后的代码如下：

<div style="width:800px;background:#FCF; margin: 0 auto;">
  <ul style="margin-top: 10px;">
    <li style="width:100px; height: 30px; background:#936;">菜单一</li>
    <li style="width:100px; height: 30px; background:#0F3;">菜单二</li>
  </ul>
  <div style="width: 300px; margin-top: 10px; height: 30px; background:#FF0; float:left;"> 模拟搜索栏 </div>
</div>

删除掉 li 中的float:left  属性，就OK了

Answer 2

其实你也可以给<ul>加上宽度，然后给模拟搜索加向右浮动也会上去，但是会跑的右边去

Answer 3

水平居中应该这样写：
style="margin:0 auto;"

Answer 4

你是想让模拟搜索栏放到菜单下面吗？
如果是这样 简单地说在有float的情况下 你给ul 和 div一个宽度 这样就好了 而且保险。加上 margin: 0 auto;就好了

Answer 5

<div style="width:800px; height:50px; background:#FCF; margin: 0 auto;">
<ul style="margin-top: 10px;">
<li style="width:100px; height: 30px; background:#936; float:left;">菜单一</li>
<li style="width:100px; height: 30px; background:#0F3; float:left;">菜单二</li>

<li style="width: 300px; height: 30px; background:#FF0;"> 模拟搜索栏 </li>
</ul>
</div>

追问

擅自改变我的意图，我就是要让ul和搜索栏分开，不能做到一起，同时垂直居中都没有了

追答

我错鸟！！！⊙﹏⊙‖∣