如何使文本框在蓝色框中与css3对齐？

Question

我想将文本框放在蓝色框的顶部，文本框中的文本将对齐中间。这是我在Fiddle上的代码。

＆＃13;

＆＃13;

.parent {
  height: 60px; 
  width: 200px; 
  padding: 17px 15px 15px 15px; 
  margin-right: 10px;
  float: left;
  background: rgba(255,255,255,0.3); 
  font-size: 26px; 
  text-align: center;
  border-top: 35px; 
  border-left: 1px; 
  border-right: 1px; 
  border-bottom: 1px; 
  border-color: #00bfff; 
  border-style: solid; 
  border-radius: 11px;
}

.parent > .child {
  vertical-align: middle;  
  text-align: center;
  background: #00bfff;
}

＆＃13;

<div class="parent">
  <div class="child">1111ggggggg1</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用position，top和width属性：

＆＃13;

＆＃13;

.parent {
  position: relative; /* added */
  height: 60px; 
  width: 200px; 
  padding: 17px 15px 15px 15px; 
  margin-right: 10px;
  float: left;
  background: rgba(255,255,255,0.3); 
  font-size: 26px; 
  text-align: center;
  border-top: 35px; 
  border-left: 1px; 
  border-right: 1px; 
  border-bottom: 1px; 
  border-color: #00bfff; 
  border-style: solid; 
  border-radius: 11px;
}

.parent > .child {
  position: absolute; /* added */
  top: -35px; /* since the top border is 35px */
  width: 200px; /* same as the parent */
  /* not needed
  vertical-align: middle; 
  text-align: center;
  background: #00bfff;
  */
}

＆＃13;

<div class="parent">
  <div class="child">1111ggggggg1</div>
</div>

＆＃13;

＆＃13;

＆＃13;