Question

任何人都可以帮助我解决这段愚蠢的代码，我失去了将近2小时试图找出如何使其工作。目标是将输入字段垂直居中并水平放置在水平条内。

这是一个简化的代码：

HTML：

<div class="navigationBar">
    <input type="text" id="searchField">
</div>

CSS：

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
}

#searchField{
    margin; auto;
    height: 25px;
    width: 200px;
}

我也尝试过显示模式，改变位置类型但没有运气。

以下是code

Answer 1

添加线高会使其垂直居中。

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
}

#seachfield
    margin; 0, auto;
    height: 25px;
    line-height: 40px;
    width: 200px;
}

Answer 2

添加display:block;

#searchField{
    display:block;
    margin: 2px auto;
    height: 25px;
    width: 200px;
}

保证金自动：左上角
添加'text-align: center;' =＆gt; （不仅是对齐文本）

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
    text-align: center;
}
#searchField{
    height: 25px;
    width: 200px;
    display:inline-block;
    margin:4px auto;
}

Answer 3

答案很简单，只需删除#nav元素的填充并将其高度和行高设置为40px然后设置display：inline-block for #search

 #nav {
	line-height: 40px;
	height: 40px;
 }
#search {
	display: inline-block;
}

Answer 4

尝试下面的CSS：

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
    position:relative;
}

#searchField{
    margin: auto;
    height: 25px;
    width: 200px;
    position:absolute;
    left:0px; right:0px; top:0px; bottom:0px;
}

PS：它不是margin; auto;，正确的语法是margin: auto;

DEMO

Answer 5

2种方法第二种方式实际上是使用最新的css功能所以，小心

1）

.navigationBar {    position: relative;}

 #searchField {    width: 300px;    
                   height: 100px;    
                   padding: 20px;    
                   position: absolute;
                   top: 50%;    
                   left: 50%;    
                   margin: -70px 0 0 -170px;
              }

2）。

.navigationBar {    position: relative;}

 #searchField {     position: absolute;    
                    top: 50%;    
                    left: 50%;    
                    transform: translate(-50%, -50%);
              }

div中输入字段的垂直和水平对齐

5 个答案: