How can I center my buttons, doesn't work

Question

I'm making just a page or something like that. And I want to center my buttons but it doesn't work.

I tried centering it with different methods, but it doesn't work. Look at the code. It has and but it doesn't center it to the whole page but only like.. i dont know. Photo: http://prntscr.com/mfrkam

<div class="form-group">
   <div class="row">
        <center> 
<input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
                              &nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
</center>

</div>
</div>

it could be inheriting CSS rules from `.btn`, `.btn-outline-success`, or `.btn-outline-danger`. The `` tag has been depreciated anyway. You should be using CSS for centering — tshimkus, Feb 02 '19 at 19:29
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Daniel Beck, Feb 03 '19 at 02:07

score 0 · Answer 1 · answered Feb 02 '19 at 19:41

As stated in mozilla developers website https://developer.mozilla.org/it/docs/Web/HTML/Element/center

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

It might be that it inherits rules from .btn or your browser doesn't support this tag anymore. You can try with text-align: center or margin: auto applied to the parent container.

Cooper · Answer 2 · 2019-02-02T20:21:28.040

Try this:

This first line of the css below will center them within a div with a class name of row and the second line will make them the same width.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .row{text-align:center;}//this will center the buttons
      input[type='submit'],input[type="reset"]{width:150px;}
    </style>
  </head>
  <body>
    <div class="form-group">
      <div class="row">
        <input type="submit" name="submit" value="Add Website"><br /><input type="reset" name="cancel" value="Cancel">
      </div>
    </div>
  </body>
</html>

This is what your dialog will look like:

You can play around with this sort of thing here: https://www.w3schools.com/cssref/pr_text_text-align.asp

CJD · Accepted Answer · 2019-02-07T21:35:37.703

The <center> tag was deprecated when HTML5 was introduced. To center text content, including buttons, wrap the content in a div, give that div a class or unique ID, and then target the div with CSS. Apply a CSS rule of text-align: center; to that div.

Try this:

<!-- style tags allow CSS to be written in an HTML file -->
<style>
  /* centers all the text in the div with a class of row */
  .row {
      text-align: center;
  }
</style>
<div class="form-group">
  <div class="row"> 
    <input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
  </div>
</div>

Note, it's accepted and most common practice to include a separate file for all CSS. It works here with style tags, but this isn't standard practice. Hope this helps!

score 0 · Answer 4 · answered Feb 04 '19 at 15:40

0

Try this in your CSS:

.row {
  text-align: center;
}

answered Feb 04 '19 at 15:40

Evgheni Lachi

44
4

How can I center my buttons, doesn't work

4 Answers4