尝试将输入框居中 div

Question

我需要在 div 中居中输入。输入始终向右浮动。有什么办法吗？我试了很多次都找不到任何解决办法。添加什么都可以。

body {
  background: yellow;
}

#siteInfo {     
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding-top: 3%;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

input {
    padding: 5%;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

Answer 1

您可以像这样更改 #siteInfo 的样式来做到这一点：

body {
  background: yellow;
}

#siteInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 3%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items:center;
}

input {
  padding: 5%;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

Answer 2

这个怎么样？将 inputs margin 设置为 5% auto 将使其以其父元素为中心 div.

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    background: yellow;
  }

  #siteInfo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    width: 50%;
  }

  input{
    margin: 5% auto;
    padding: 5%;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    border: 3px solid violet;
  }
</style>
</head>
<body>

<div id="siteInfo">
    <input value="Test" \>
</div>

</body>
</html>

尝试将输入框居中 div

Trying to center the input box inside a div

html

css

centering