我想让 input
字段在每个 div 内垂直居中。 color-1
color-2
color-3
在每个 div 或 input
中使用 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>
最佳答案
您可以使用 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;
}
有关更多信息,请参阅此 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - 在 div 内垂直居中输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31697211/