nwimmer123 nwimmer123 - 1 month ago 4
CSS Question

Center input horizontally in div

I know this has been answered 100 times, but none of the existing solutions seem to work for me.

I want to center an input field horizontally in a div. Why is horizontal centering such a pain?!?!? The parent div may change in size based on screen size, so margin percentages don't work.


<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">

<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>

parents CSS

.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;

I also want to center this one, and I assume it will be the same solution, but it has no parent, besides body.

<div class="input-group">
<input class="text-center" type="text" id="word">


Why not use Bootstrap's center-block class..

<div class="input-group center-block">
  <input class="center-block" type="text" id="word">