html - 垂直对齐部分内的输入

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;
}

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

Answer 1

方法一:

table > table-cell vertical-align:middle 技巧不能直接作用于输入。只需将您的输入包装在一个 div 中，然后使用该技巧将这些 div 居中。

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

HTML:(注意 .input div)

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

CSS:

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; 的演示顶部:50%；左:50%

和转换:translate(-50%, -50%);

并且不需要额外的 div 包装

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