带标签的垂直对齐输入

我希望我所有的输入（image）都对齐在同一条垂直线上。带标签的垂直对齐输入

垂直对齐css属性不起作用，我发现sass mixin也没有（见下文）。

@mixin vertical-align($pos) { 
    position: $pos; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

有没有简单的方法来做到这一点。我一直在挣扎四个半现在一小时。

一个fiddle包括CSS & HTML

来源

2014-06-14 thibmaek

发布您的实际CSS和HTML尝试，如果可能提供演示。 –

@NicoO我加了一个jsfiddle – thibmaek

你的小提琴甚至不工作... http://jsfiddle.net/qych4/1/ –

的vertical-align财产沿水平线垂直对齐元素。我猜你希望所有的输入都从水平线上的同一个地方开始，创建一种双列网格。

label { 
    display: inline-block; 
    width: 5em; 
}

来源

2014-06-14 16:36:26 KnutSv

你打我吧！ – Nathanael

非常感谢，这解决了它。永远感谢 – thibmaek

你可以使用表，以及：

这可以通过achived！以下是更新后的提琴：

http://jsfiddle.net/qych4/5/

格式化你的代码，以及！

<section> 
     <article> 
      <form action="" id="book" method="post" name="book"> 
       <fieldset> 
        <legend>Boek</legend> 
        <table> 
         <tr> 
          <td><label>Email:</label></td> 
          <td><input type=""></td> 
         </tr> 
         <tr> 
          <td><label>Tours:</label></td> 
          <td><input type="checkbox"></td> 
         </tr> 
         <tr> 
          <td><label>Techno</label></td> 
          <td><input type="checkbox"><label>HCore</label> 
          <input type="checkbox"><label>Trance</label></td> 
         </tr> 

         <tr> 
          <td><label for="">Aantal pers:</label></td> 
          <td><input type="number"></td> 
         </tr> 
         <tr> 
          <td><label>Bericht:</label></td> 
          <td><textarea></textarea></td> 
         </tr> 
        </table> 
       </fieldset> 
      </form> 
     </article> 
    </section>

来源

2014-06-14 16:42:36 imbondbaby

带标签的垂直对齐输入

回答

相关问题