Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用ArrayList<Integer> list = new ArrayList<Integer>(); list.add(23); list.add(65); list.add(85); list.add(1); list.add(54); list.add(5); Collections.sort(list); for(int i=0;i<3;i++) System.out.println(list.get(i));或使用display:flex以两种方式执行此操作，您需要将其包含在另一个div中。

使用display：flex更好，你不需要在另一个div中包装模板

为所有颜色div添加班级display:table,display:table-row and display:table-cell

＆＃39;颜色＆＃39;类

color

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

Answer 2

我做了demo

.replace(/(\d{2})(\d*)/, '$1.$2')

并制作div

ALIGN =＆＃34;中心＆＃34;

在div内垂直居中输入

2 个答案: