将按钮插件输入与文本对齐

Question

我有一个表单与2个输入，文本输入和提交表单的按钮。

在此表单的旁边，左侧有文本。

我希望将左侧的文本与文本输入字段对齐。

这里有一个小提琴：https://jsfiddle.net/5vdcb120/1

CSS代码：

.text, .form{
    display: inline-block;
}

HTML代码：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">
  <p class="text">Name:</p>
  <form class="wrapper">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
        </span>        
    </div> <!-- .input-group -->
    <p>Some Text</p>
  <form> <!-- .form-->
</div> <!-- .container -->

我希望将文本Name: with text类与文本输入对齐，使其位于文本输入的中间。

我试过vertical-alignment: middle;，但它不起作用。

​

​

Answer 1

我不太确定我是否理解了你的问题，但希望这能有所帮助：https://jsfiddle.net/aoc3g96d/5/

​

 .text, 
 .form{
  position: relative;
  display: inline-block;
  float: left;
}

.text {
 top: 5px;
 margin-right: 5px;
 
 width: 9%;
 text-align: right;
}

.form {
  width: 90%;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">
<p class="text">Name:</p>
 <form class="form">
  <div class="input-group">
   <input type="text" placeholder="SomeText" class="form-control">
   <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Go!</button>
   </span>
  </div>
 <form>
</div>

​

Answer 2

您可以添加：

 display: flex; 
 align-items: baseline; 

添加到容器类，让它像这样为您工作。

祝你在编码上好运！

​

.text, .form{
    /*display: inline-block;*/
}

.container {
  display: flex;
  align-items: baseline;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">

  <p class="text">Name: </p>
  <form class="wrapper">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
    <p>Some Text</p>
    </form>
    
</div>

​

Answer 3

您可以尝试将CSS Grid属性添加到容器类中：

​

.container {
  display: grid;
  grid-template-columns: 0px 50px auto;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<div class="container">

  <p class="text">Name: </p>
  <form class="wrapper">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Go!</button>
      </span>
    </div>
    <p>Some Text</p>
    </form>
    
</div>

​