无法居中输入字段css

Question

对不起，我是新来的;试图建立谷歌网页进行练习。我无法弄清楚为什么我的“输入”不会进入页面的中心。

HTML：

#submitsearch {
  text-align:center;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

<div id="submitsearch">
   <input type="submit" value="Google Search">
   <input type="submit" value="I'm feeling lucky">
</div>

Answer 1

  <div id = "parent">
  <input type="submit" value="Google Search">
         <input type="submit" value="I'm feeling lucky">
      </div>

CSS

html,body,#parent{
  width:100%;
  height:100%;
}
#parent{
  display:flex;
  align-items:center;
  justify-content:center;
}

Working Example

Answer 2

https://codepen.io/Ylama/pen/BJjBeq

  <div>
     <input type="submit" value="Google Search">
     <input type="submit" value="I'm feeling lucky">
  </div>

CSS

 div {width: 100%;text-align: center;}

 input {margin: 0 auto;}

应该做的伎俩。

Answer 3

尝试以下方式：

  <div class="make-inputs-center">
      <input type="submit" value="Google Search">
     <input type="submit" value="I'm feeling lucky">
  </div>

和CSS：

.make-inputs-center {
  text-align:center;
}

Answer 4

有两种方法可以解决它。

您可以使用absolute positioning和transform the submitsearch到页面的中心（这允许您不对父容器进行任何更改）：

#submitsearch {
  position:absolute;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  left:50%;
  top:50%;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

<div id="submitsearch">
   <input type="submit" value="Google Search">
   <input type="submit" value="I'm feeling lucky">
</div>

要么

将您的submitsearch设置为弹性框，并通过将其高度增加到100vh（或将您的身体和提交搜索高度增加到100％）来对齐并对齐页面中心的内容：

#submitsearch {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

<div id="submitsearch">
   <input type="submit" value="Google Search">
   <input type="submit" value="I'm feeling lucky">
</div>

Answer 5

添加以下内容将为您提供帮助

margin : 0 auto;