CSS，如何在大图像旁边垂直对齐按钮

Question

我想垂直对齐图像右侧的按钮。这是代码：

<div style = "display:inline-block;width:250px;height:200px;border:2px solid">
</div>

<div style = "display:inline-block;width:250px;height:200px;border:2px solid">
</div>
<input type="submit" value="Submit" style = "display:inline-block;">

这是结果：

该按钮显示在div标签的右下角。我想要的是它出现在div标签的右上角。我怎么能这样做？

Answer 1

其他答案都很好，但你错过了一件事。如果将类样式设置为所有输入，那么它们将按照这样的方式对齐。如果您有多个按钮，则必须使用以下代码示例：

.the_button {
    vertical-align:top;
    width: 100px; height:50px;
    display:inline-block;
    border:2px solid;
        background:#ffffff; 
    color:#000000;
}

仅为此按钮设置类似“the_button”的类，并按如下方式调用它：

<div class="wrapper">
    <div style = "display:inline-block;width:250px;height:200px;border:2px solid"> </div>
    <div style = "display:inline-block;width:250px;height:200px;border:2px solid"> </div>
    <input type="submit" value="Submit" class="the_button">
</div>

我为你创造了一个很好的演示amigo

http://jsfiddle.net/yyL3845e/2/

Answer 2

您需要垂直对齐按钮。

input[type="submit"] {
    vertical-align:top;
}

http://jsfiddle.net/yyL3845e/

Answer 3

将输入的vertical-align属性设置为top：

input {
  vertical-align: top;
}

<div style="display:inline-block;width:250px;height:200px;border:2px solid"> </div>
<div style="display:inline-block;width:250px;height:200px;border:2px solid"> </div>
<input type="submit" value="Submit" style="display:inline-block;">