Question

我试图将描述和输入集中在屏幕中间。但我不知道如何完美地对齐描述和输入。这是我的HTML代码和CSS。

       <div class="smallrow innerbody">
           <div class="col-12">
              <h1>Here is the side column</h1>
           </div>
           <div>
               <div class="col-6" style="text-align: right;">
                 <p>Please input your email address:</p>
                 <p>Please input your password :</p>
                 <p>gender :</p>
                 <p>city :</p>
               </div>
               <div class="col-6" style="text-align: left;">
                   <input type="email" name="email"><br>
                   <input type="password" name="password">
               </div>
           </div>
        </div>

这部分是相关的CSS代码

.smallrow{
width: 98%;
margin: 10px;
position: relative;
box-shadow: 10px 10px 5px #888888;
}

col-6 {
    width: 50%;
}

我目前的工作看起来像这样 current result

Answer 1

您可以使用帮助程序类.text-center对其进行居中并删除.col类。我还将您的文字放在label中，并将每个标签包裹在div中，以便它们位于自己的行中。

.smallrow {
  width: 98%;
  margin: 10px;
  position: relative;
  box-shadow: 10px 10px 5px #888888;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="smallrow innerbody">
  <div class="col-12">
    <h1>Here is the side column</h1>
  </div>
  <div class="text-center">
      <div>
        <label>Please input your email address: <input type="email" name="email"></label>
      </div>
    <div>
      <label>Please input your password : <input type="password" name="password"></label>
    </div>
    <p>gender :</p>
    <p>city :</p>
  </div>
</div>

Answer 2

您需要将col-6浮动到左侧。您在css中的col-6之前也缺少.。

以下是您的代码的固定版本。 https://jsfiddle.net/ttmtnq9c/

Answer 3

以下是您可以使用的Demo ...

不要忘记添加bootstrap：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

如何完美地对齐html的输入描述和输入

3 个答案: