Question

我搜索并尝试了很多CSS代码。我也是，之前垂直对齐的东西。尝试了解我所知道的一切，这次都做不到。

我有一张表格。在这个表格里面，有两个部分。内部部分，一个输入（每个）。所有这些都包含在文章中。

如何使这些输入垂直对齐？

HTML

<article>
<form action="index.php" method="post" name="blabla">
<div id="side1">
<input type="image" name="side1" src="path.png">
</div>
<div id="side2">
<input type="image" name="side2" src="path2.png">
</div>
<div style="clear:both;"></div>
</form>
</article>

这个家伙的CSS

article #side1{
    width:47%;
    padding:1%;
    float:left;
    text-align: center;
    height: 750px;
}

article #side2{
    width:47%;
    padding:1%;
    float:right;
    text-align: center;
    display:inline-block;
    position:relative;
    height: 750px;
}

#side1 input, #side2 input{
    display:inline-block;
    vertical-align: middle;
}

我尝试过显示表，表格单元格组合。内联块，垂直对齐，固定高度等等。所以不要介意我的CSS。

Answer 1

方法1：

table＆gt;使用table-cell的{{1}}法案不会直接处理输入。只需将输入包装在div中，然后使用该技巧将这些div放在中心位置。

这是一个演示：http://jsfiddle.net/mirohristov/dhr4hpo7/1/

HTML :(注意.input div）

vertical-align:middle

CSS：

<div id="side2">
    <div class="input"><input type="image" name="side2" src="path2.png" /></div>

方法2：

这是使用article #side1, article #side2{ width:47%; padding:1%; float:left; text-align: center; height: 750px; display:table; border: 2px dotted grey; } #side1 .input, #side2 .input{ display:table-cell; vertical-align: middle; height:20px; }

的另一个演示

和position:absolute; top:50%; left:50%

并没有额外的div包装必要

http://jsfiddle.net/mirohristov/dhr4hpo7/4/

Answer 2

您需要在每个<br/>代码后添加<div>个代码。您可以堆叠多个<br/>标记以在其间创建空格：

<article>
    <form action="index.php" method="post" name="blabla">
      <div id="side1">
        <input type="image" name="side1" src="path.png">
      </div><br/>
      <div id="side2">
        <input type="image" name="side2" src="path2.png">
      </div><br/>
      <div style="clear:both;"></div>
    </form>
</article>

如果这不起作用，请尝试将<br/>标记放在不同的位置，例如<input>标记之后。

垂直对齐输入内部的输入

2 个答案:

方法1：

方法2：