-1

http://jsfiddle.net/4konLwjp/15/ I need center the input in div, The input always float right. Is there any way to do it? HTML:

<div id="siteInfo">
   <input value="Some Button" \>
</div>

CSS:

#siteInfo {
  padding: 5%;
  background: rgba(0,0,0,0.6);
  text-align : center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
input {
  margin: 0 auto;
padding:5%;
width: 300px;
display: inline-block;
}
Jin Tang
  • 55
  • 5
  • the reason why input cann't center in your siteInfo div is that you set the input a `padding: 5%`, and the input is not a border-box, it's a content-box , content-box only contains real content when caclcute width of itself ,so you should change to the border-box, which contains not only real content, but padding、 border – screw spike Dec 12 '21 at 21:27

2 Answers2

2

in your code ,you can just add box-sizing: border-box; in your input style ,like this:

input {
  margin: 0 auto;
padding:5%;
box-sizing: border-box; // add this line
width: 300px;
display: inline-block;
}

try it

screw spike
  • 371
  • 1
  • 6
-1

Add this lines to #siteInfo styles

display: flex;
align-items: center;
justify-content: center;
Reza Mohabbat
  • 173
  • 5