在div内垂直居中输入

Question

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

 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> 

Answer 1

您可以使用display:flex以两种方式执行此操作display:flex或using 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;
}

有关详细信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我做过演示

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

}

并制作div

ALIGN = “中心”