将 <div> 与 1 个 <form type="text"> 和 2 个 <span> 垂直对齐答案

【问题标题】：Vertically aligning <div> with one <form type="text"> and 2 <span>s将 <div> 与 1 个 <form type="text"> 和 2 个 <span> 垂直对齐
【发布时间】：2011-03-30 16:04:01
【问题描述】：

我希望对齐我的一个 <div> 容器，该容器具有嵌套的 <form ype="text"> 和 2 个 <span> 标签，但我似乎无法将 margin-top: 6px; 应用于容器 <div>。

padding-top: 6px; 会是答案吗？

【问题讨论】：

不是 100% 确定你的意思。你想让一个有一个文本框的<div> 与两个<span> 标签对齐（垂直？）？
好吧，我想垂直对齐包含两个<span>元素和一个<form type="text">元素的<div>元素。

标签： html css padding margin

【解决方案1】：

给你，http://jsfiddle.net/EWkMA/

CSS：

div#middle {
    height: 200px;
    vertical-align: middle;
    display: table-cell;
}

HTML：

<div id='middle'>
    <input type='text' value='test'/><br/>
    <span>a</span><br/>
    <span>two</span>
</div>

【讨论】：