Question

我有以下简单的HTML和样式（http://jsfiddle.net/ZLNvv/）。

<DIV>
    <BUTTON class="button"></BUTTON>
    <INPUT class="textbox" type=text>
</DIV>

.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}

按钮尺寸过大，以清楚地显示输入框不符合vertical-align：middle。如果我移除浮动：按钮上的左侧样式，垂直对齐工作。有没有办法将两者结合起来？

我给出了显示问题的最小例子，我想要实现的更准确的例子是（http://jsfiddle.net/peerz/）。

<DIV>
    <DIV>Header</DIV>
    <DIV class ="lineDiv">
          <Div class="subHeaderDiv">
                  <BUTTON class=button></BUTTON>
                  <div class="subHeaderText"> Subheader 1</div >
          </Div>
          <INPUT class="textbox" type=text>
    </DIV>    
    <DIV class ="lineDiv">    
          <Div class="subHeaderDiv">  
                  <div class="subHeaderText"> Subheader 2</div >
          </Div>
          <INPUT class="textbox" type=text>
    </DIV>
</DIV>

.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}

感谢您的帮助。

Answer 1

如果您想将两个并排放置，请尝试display: inline-block而不是浮动。

Answer 2

这是浮动的默认行为，浮动元素将尝试尽可能向上和向左/向右移动，因此垂直对齐将不起作用。显示：内联块或边距就像panos和bigfatpig所说的那样。

Answer 3

试试这个：

<div>
    <input type='button' class="button" value='press'/>
    <input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>

它应该做你想要的。

使用浮动样式时，HTML元素不遵循垂直对齐样式

3 个答案: