CODEWITHSUNDEEP
htmlcss
Roger
Roger

Reputation: 35

Why does this button not align?

CSS:

.button {

  color: black;
  background: lightblue;
  text-align: center;
    font-weight: bold;
  border: 1px solid blue;
}

.button:hover {
  color: #FFF;
  background: green;
}

HTML:

 <button class="button" type="submit" value="Submit"/>Submit</button>

I am trying to align the button to the center but it is not happening. Is this because I used class or what?

I would prefer to not use class, but I tried that and it wouldn't work either, so I just stuck with class since I found out I could do the hover with it.

Could you explain also why I would use the type and value inside the button? I found example code like this and I copied it, but I'm not sure how it works.

Upvotes: 1

Views: 81

Answers (6)

Alan Dunning
Alan Dunning

Reputation: 1351

Add display: block; margin: 0 auto; to .button make it as a block element.

Upvotes: 0

Carlos Carlsen
Carlos Carlsen

Reputation: 373

Add display: block to .button so that it can recognize margin

Upvotes: 0

YourFriend
YourFriend

Reputation: 434

I would just convert button into Block Element by using display:block. So that I can use margin property on it, to put it in center. Long and short, put these lines of codes in your .button css code.

display:block;
margin:auto;

Here is the result https://jsfiddle.net/p1q3xy00/14/

I really have no idea why the heck someone would use value and type attributes inside button tag. Actually they are used in input tag to specify the properties of element. For example value acts like a placeholder while type defines the format of input. It can be a checkbox, email, password, text, date, color etc.

Upvotes: 1

user1234567
user1234567

Reputation: 61

wrap your button with a div tag and provide the alignment to the div.

<div style="text-align:center">
    <button class="button" type="submit" value="Submit"/>Submit</button>
</div>

There's three types for the button input

button: just a button and doesn't cause any events to occur. So, you'll have to provide events on your own.

submit: submits the form to which it is associated to.

reset: clears the fields in the form to which it is associated to.

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114991

You could just add text-align:center to the parent element

body {
  text-align: center;
}
.button {
  color: black;
  background: lightblue;
  font-weight: bold;
  border: 1px solid blue;
}
.button:hover {
  color: #FFF;
  background: green;
}
<button class="button" type="submit" value="Submit" />Submit</button>

Upvotes: 0

bart s
bart s

Reputation: 5100

If you want to align the button to the center of the page, you can add a wrapper around it and center it in there

.button {
  color: black;
  background: lightblue;
  text-align: center;
  font-weight: bold;
  border: 1px solid blue;
}

.button:hover {
  color: #FFF;
  background: green;
}
.wrapper {
    text-align:center;
}
<div class="wrapper">
    <button class="button" type="submit" value="Submit"/>Submit</button>
<div>

Upvotes: 0

Related Questions