CODEWITHSUNDEEP
htmlcss
doctopus
doctopus

Reputation: 5647

Button not centering after moving it to bottom of div

I'm trying to create a form where the submit is always at the bottom and in the center.

I'm centering by using text-align: center in the parent div and moving it to the bottom with position: absolute and bottom: 20px, but it seems that after I do that it moves slightly off center - why is this case and how do I remedy this?

HTML:

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p>
    <button type='submit'>
      Submit
    </button>
  </form>
</div>

CSS:

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}

button {
  position: absolute;
  bottom: 20px;
}

Demo: https://jsfiddle.net/f9ktLn9o/3/

Upvotes: 0

Views: 35

Answers (3)

Tommy
Tommy

Reputation: 74

Try this instead of your css:

button {
  position: relative;
  margin-top: 40%;
}

It work for chrome, Firefox, Edge and IE (just tested these) By using position: absolute;, the button is fixed in the page, but not fixed in the div. Always try to use percentage and not pixel if you can (responsive design is way beter for end users)

Upvotes: 1

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

Taking a look at Computed styles you will see left and right position values defined in the box model.
You'll need to unset these values with your own, with a few other adjustments, you will achieve the intended behaviour.

Updated JSFiddle

Code Snippet Demonstration:

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
  /* Additional */
  position: relative; /* position absolute child relative to parent */
}

button {
  position: absolute;
  bottom: 20px;
  /* Additional */
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 100px;
}
<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p><button type='submit'>
      Submit
    </button>
  </form>
</div>

Upvotes: 1

MCMXCII
MCMXCII

Reputation: 1026

Where you've pulled it out of the stack using position: absolute; it'll now be centered to the left of the button. If you translate it 50% of the width of the button to the left, it should fix the issue.

transform: translateX(-50%);

https://jsfiddle.net/f9ktLn9o/4/

Upvotes: 2

Related Questions