Trying to center the input box inside a div

Question

I need center the input in div. The input always float right. Is there any way to do it? I tried many time any can't find any solve. add anything is ok.

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>

Without any change in the styles of `#siteInfo`? – Saeed Shamloo Dec 13 '21 at 08:50 — Saeed Shamloo, Dec 13 '21 at 08:50
change the #siteInfo is ok but It looks can't be different – Jin Tang Dec 13 '21 at 08:56 — Jin Tang, Dec 13 '21 at 08:56
avoid percentage value with padding, use pixel value – Temani Afif Dec 13 '21 at 15:06 — Temani Afif, Dec 13 '21 at 15:06

Saeed Shamloo · Accepted Answer · 2021-12-13T09:58:06.510

-1

You can do it by changing the style of #siteInfo like this:

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>

edited Dec 13 '21 at 09:58

answered Dec 13 '21 at 08:56

Saeed Shamloo

6,199
1
7
18

see angin please,I was change something of code. – Jin Tang Dec 13 '21 at 09:05
where would you like to put `132321` ? left? what is your expected output? – Saeed Shamloo Dec 13 '21 at 09:14
http://jsfiddle.net/6dme5y8u/15/ – Jin Tang Dec 13 '21 at 09:26
I want center them. – Jin Tang Dec 13 '21 at 09:27
I editet my answer – Saeed Shamloo Dec 13 '21 at 09:30
let me see and test. – Jin Tang Dec 13 '21 at 09:34
hey do you have discord? I tried this on my website,and it other input float left. I can't show this website on it. so can you give me your discord or any chat way. – Jin Tang Dec 13 '21 at 09:36
Ok, here is my telegram id: `@sa_shamloo` – Saeed Shamloo Dec 13 '21 at 09:37
where can I add it. This is my first time to use telegram. – Jin Tang Dec 13 '21 at 09:44
Give me your id, and I'll send you a message – Saeed Shamloo Dec 13 '21 at 09:44
oh I know,see it please. – Jin Tang Dec 13 '21 at 09:45

score -1 · Answer 2 · answered Dec 13 '21 at 08:56

how about this? setting inputs margin to 5% auto will make it center to its parent 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>

see angin please,I was change something of code. – Jin Tang Dec 13 '21 at 09:05 — Jin Tang, Dec 13 '21 at 09:05

Trying to center the input box inside a div

2 Answers2