2

Is there a way to align a button (or any other object) in the center of the screen (this should work for any size of computer screen)? I'm doing a project and tried wrapping the button into a div and setting text-align: center, but the button is still off center and I was wondering if there's another way to do that? Thank you very much in advance.

A.S.J
  • 627
  • 3
  • 14
  • 38
  • have you tried using `margin: 0 auto` to align the div to the center? – Ballard Sep 09 '17 at 11:45
  • 1
    Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – Ballard Sep 09 '17 at 11:52
  • I've been reading about how to do it and I've been trying all kinds of methods for like an hour now so no, it's not – A.S.J Sep 09 '17 at 11:55

2 Answers2

4

The reason that text-align: center is not working when you set it on the button tag is that property is setting the alignment of the text within the button itself.

button {
 text-align: center;
}
<button>Button</button>

We can prove this by setting the width of the button, and setting text-align: left.

button {
 width: 70vw;
 text-align: left;
}
<button>Button</button>

To center the button, we can have its parent to set to text-align: center.

div {
 text-align: center;
}
<div>
  <button>Button</button>
<div>

Additionally, we can set the button to display: block; and apply margin: 0 auto. This saves us from having to wrap the button within a container element.

button {
  display: block;
  margin: 0 auto;
}
<button>Button</button>
Community
  • 1
  • 1
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
-1

This should work. margin set to auto for the containing div 

.container {
    margin: auto;
    width: 100px;
}
<div class="container">
    <button>Submit</button>
</div>
Ballard
  • 869
  • 11
  • 25
  • Not a problem, if you could mark it as correct, thanks :) – Ballard Sep 09 '17 at 12:12
  • 1
    This is a bit fragile since if you change the amount of text within the button, you'll need to manually adjust the width of it's container. Also, it's hard to verify if the button is truly centered, or just close to it. – Raphael Rafatpanah Sep 09 '17 at 13:02
  • No matter how much text is displayed by the button, it will always be centered. However, your point regarding the width of the container is valid; fortunately, OP asked for a centered button within this "wrapping" container, therefore it is not relevant – Ballard Sep 09 '17 at 13:22
  • @ReConnected, I can show an example where the button is not centered with your method. https://jsfiddle.net/8Lqqp0xz/ – Raphael Rafatpanah Sep 09 '17 at 13:46
  • @RaphaelRafatpanah, I see, is this due to possible addition of a scrollbar? – Ballard Sep 09 '17 at 14:05
  • 1
    @ReConnected I don't think so. You can verify that by setting `.container {text-align: center;}`. I think the reason why the button is not centered for button widths less than the container width is that the button is not centered within the container itself. This problem is masked when the button overflows the container's width. – Raphael Rafatpanah Sep 09 '17 at 15:51