在 div 内垂直居中输入答案

【问题标题】：Vertically center input inside a div在 div 内垂直居中输入
【发布时间】：2015-10-20 05:49:44
【问题描述】：

我想让input 字段在每个 div 即中垂直居中。 color-1color-2color-3
在每个 div 中使用 vertical-align: middle 或 input 都不起作用。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

input[type="text"]  {
  width:150px;
  height: 30px;
  text-align: center;
}

#color-1 {

  height: 33%;
  background: {{yourName}};
  text-align: center; 
  vertical-align: middle;
}

#color-2{
  height: 33%;
  background: {{color_2}};
  text-align: center; 
  vertical-align: middle;
}

#color-3{
  height: 33%;
  background: {{color_3}};
  text-align: center; 
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div id="color-1">
  <input type="text" ng-model="color_1" placeholder="Enter Color #1">
  <h1>{{color_1}}</h1>
</div>

<div id="color-2">
  <input type="text" ng-model="color_2" placeholder="Enter Color #2">
  <h1>{{color_2}}</h1>
</div>

<div id="color-3">
  <input type="text" ng-model="color_3" placeholder="Enter Color #3">
  <h1>{{color_3}}</h1>
</div>

【问题讨论】：

你能不能把它弄个 jsfiddle 让它容易理解
stackoverflow.com/questions/4466596/…

标签： html css vertical-alignment

【解决方案1】：

您可以通过两种方式使用display:flex 或使用display:table,display:table-row and display:table-cell，您需要将其包装在另一个 div 中。

使用 display:flex 更好，您无需将模板包装在另一个 div 中

为所有颜色 div 添加类 color

“颜色”类的样式

.color{
   height:33%;
   display: flex;
   justify-content: center;
   align-items:center;
}

【讨论】：

【解决方案2】：

我做了demo

 #color-1 
{
    height: 33%;
    background: {{yourName}};
    vertical-align: top;
    background: red;
    display: flex;
    justify-content: center;
    flex-direction: column;

}

制作 div

align="center"

【讨论】：

我失去了水平对齐:(
我删除了 text-align:center