CODEWITHSUNDEEP
htmlcssbuttoncentering
Lenny
Lenny

Reputation: 167

Why are inline-block divs inside button becoming centered?

Trying to make a nice meaningful button I noticed following: When having inline-block divs inside a button they become centered without us programmers/stylers having any control over it...

I would like them to have a certain distance from the left or right border of the button.

HTML

<button>
    <div class="button-inner button-inner-left">Left</div>
    <div class="button-inner button-inner-right">Right</div>
</button>

CSS

button {
    padding: 0;
    margin: 0;
    width: 500px;
    height: 50px;
    display: block;
}
.button-inner {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.button-inner-left {
    text-align: left;
    margin-right: auto;
}
.button-inner-right {
    text-align: right;
    margin-left: auto;
}

Here's a codepen for it:

https://codepen.io/JhonnyJason/pen/PRZNpN

Basicly I have 2 Solutions to this problem:

PS: Soo next time when I encounter the problem of not being able to center something I will introduce a wrapper button xD

Upvotes: 1

Views: 1459

Answers (3)

SpaceDogCS
SpaceDogCS

Reputation: 2968

That happens cause by default, all buttons has text-align: center, if you force the button to have text-align: left it will go all to left

It is to notice that the text-align property does influence the alignment of the inline-blocks.

Upvotes: 3

Kyle Joeckel
Kyle Joeckel

Reputation: 469

this should work if i understand the question correctly first get rid of button-inner-left and right classes, you dont need them. for button just change the display to flex like you did on one of the codepens and add 'justify-content: center' and 'align-content: center' then change the margin to on button-inner to 'margin: 0 auto' classes like so:

.button{
  padding 0
  margin 0
  display flex
  width 50vw
  height 5vw
  justify-content center
  align-content center
}

  .button-inner{
    text-align center
    margin 0 auto}

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22783

It is centered because every browser apply it's own default CSS:

Open the developer tool and see the applied classes on button:

Chrome says: "user agent stylesheet"

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

Solution is not difficult, you already know that.

Upvotes: 1

Related Questions