CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 4264

Button not centering in HTML Form

For some reason, the following code is not causing an custom-made input button to center (the one labeled "Click Me"), but the default button ("Submit") is centering.

form{
    text-align : center;
}
.button2{
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
}

<form method="post">
        {% csrf_token %}
        {{ form.as_p }}        
        <div class="buttonHolder">
            <button type="submit">Submit</button>
            <input class="button2" type="submit" value="Click Me"/>
        </div>
</form>

What is causing this to happen? This HTML file is being run in a Python/Django project, if that makes a difference. Thanks for your help.

Upvotes: 1

Views: 2696

Answers (5)

Rovi
Rovi

Reputation: 259

Just add the below styling to .button2

.button2 {
display: table;
    margin: 0 auto;
}

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

Seeing that you have already got your answer i.e.

form {
    text-align : center;
}
.button2 {
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

Using margin: 0 auto; for but I would still like to explain why it happened.

The submit button stayed in center but the second button did not.

Reason:

By default both button and input type have margin as 0 em. And thus when you apply text-align:center to the form both button and input will appear in center.

Now you would like to add display:block to the second button. Once you do that the element will take the full width and the space following the content of the element will be acting as margin. This margin is letting your button to move to the left side of the block. Now in order to offset this margin you need to add the property: margin:0 auto; i.e. top and bottom will have 0px margin(you change how much you want) and left and right margin will be auto adjusted which will bring your element to center.

Final thoughts:

Always remember to add custom margins to element with display:block property to overwrite the default margins.

Upvotes: 1

prajeesh
prajeesh

Reputation: 2392

Use the following style for "click me" button

margin: 0 auto;

This means

top and bottom margins are 0
right and left margins are auto

Upvotes: 0

www139
www139

Reputation: 5237

The problem is that your button is inheriting the text-align:center; from the text-align:center; declaration on the form tag.

Add this to your CSS

.buttonHolder{ text-align:left; }

form {
  text-align: center;
}
.button2 {
  display: block;
  height: 100px;
  width: 300px;
  text-align: center;
}
.buttonHolder {
  text-align: left;
}
<form method="post">
  {% csrf_token %} {{ form.as_p }}
  <div class="buttonHolder">
    <button type="submit">Submit</button>
    <input class="button2" type="submit" value="Click Me" />
  </div>
</form>

Please tell me if I didn't understand the question correctly and I will revise my answer :)

Upvotes: 0

adriancarriger
adriancarriger

Reputation: 3000

Working JSFiddle

Just add margin: 0 auto; to your CSS.

Full CSS

form {
    text-align : center;
}
.button2 {
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

Upvotes: 1

Related Questions