垂直对齐节内的输入答案

【问题标题】：Vertical Align Input Inside a Section垂直对齐节内的输入
【发布时间】：2015-02-12 23:12:09
【问题描述】：

我搜索并尝试了很多 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。

【问题讨论】：

标签： html css

【解决方案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; top:50%; left:50% 的演示

和transform: translate(-50%, -50%);

不需要额外的 div 包装

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

【讨论】：

首先，感谢您的回答。我不想给输入固定高度，所以我没有。但是，它仍然对我有用。但我想问，我必须为部分使用固定高度吗？如果是，请考虑这种情况。第一面有 100x200 图像，第二面有 100x250 图像。在这种情况下，两个部分的高度都必须为 250 像素。假设第一面有 250x550 的图像，第二面有 225x225 的图像。在这种情况下，两个部分的高度都必须为 550 像素。决定哪一个更长，并固定与更长的相关的高度。我可以用 CSS 做到这一点还是应该使用 JS？请注意，内容是动态的。
不要使用js。 CSS可以做到。如果是这种情况，请将输入放在同一个表中。您必须将两个单元格放在同一个表中。这是一个演示：jsfiddle.net/mirohristov/dhr4hpo7/5

【解决方案2】：

您需要在每个<div> 标签之后放置<br/> 标签。您可以堆叠多个<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> 标记之后。

【讨论】：