试图将输入框居中在一个 div [重复]答案

【问题标题】：Trying to center the input box inside a div [duplicate]试图将输入框居中在一个 div [重复]
【发布时间】：2022-01-16 18:19:14
【问题描述】：

http://jsfiddle.net/6dme5y8u/5/

我需要将输入放在 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>

【问题讨论】：

#siteInfo的样式没有任何变化？
更改#siteInfo 没问题，但看起来不能不一样
避免使用填充百分比值，使用像素值

标签： html css centering

【解决方案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>

【讨论】：

请看angin，我正在更改一些代码。
你想把<span>132321</span>放在哪里？剩下？你的预期输出是什么？
jsfiddle.net/6dme5y8u/15
我希望它们居中。
我编辑我的答案

【解决方案2】：

这个怎么样？将输入边距设置为 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>

【讨论】：

请看angin，我正在更改一些代码。