Question

input元素未完全在父级内部。我希望input位于父级的中心，但它从顶部获得一些余量。要添加什么css来修复它？

#menu
{
	height:30px;
	background: #ccc;
}

#board-name
{
	display:block;
	margin-left:auto;
	margin-right:auto;
	height: 80%;
        vertical-align: middle;
	min-width:200px;	
}

<div id="menu">
	<span id="plus">+</span>
	<input id="board-name" value=''/>
</div>

Answer 1

你可以使用：

#board-name {
    margin-top: -18px;
}

或致电

#plus {
    float: left;
}

Answer 2

使用位置：相对于您的父母和位置：绝对您的孩子。然后尝试保证金：自动或你可以搞乱左：XX和右：XX

Answer 3

将输入居中并浮动+：

＆＃13;

tableView.reloadData()

＆＃13;

#menu
{
  height:30px;
  background: #ccc;
  text-align: center;
}
#plus
{
  float:left;
}
#board-name
{
  display:block;
  margin-left:auto;
  margin-right:auto;
  height: 80%;
  vertical-align: middle;
  min-width:200px;	
}

＆＃13;

Answer 4

你可以像下面那样对你的css做一点改动，它也包含你的代码和其他一些

     #menu
     {
     height:30px;
     background: #ccc;
     }
     #plus {
     float: left;
     }
     #board-name
     {
     display: block;
     margin: 0 auto;
     height: 80%;
     vertical-align: middle;
     min-width:200px;
     position: relative;    
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     }

正确定位输入元素

4 个答案: