CMArg CMArg - 2 months ago 7
CSS Question

HTML center element inside div

I want two styled submit buttons (xx1 and xx2) to be centered inside their div (MainDiv). I've tried several things with no success.

margin: auto;
or
margin: 0 auto;
should do the trick. Does anybody know why following code is not centering inputs inside each MainDiv?

html:

<div class="container">
<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX1"></div>
<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX2"></div>
</div>


css:

.container{
display:flex;
align-items: center;
}

.MainDiv {
height:25vh;
background-color:transparent;
width:50%;
margin: 0 auto;
}
.SubmitGral {
margin: 0 auto;
height:90%;
width:70%;
border:none;
background-color:#6c3;
font-size:1.4em;
white-space: normal;
word-wrap: break-word;
-o-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
}


fiddle here

Answer

You just have to add text-align:center to .MainDiv class and you are done.

See here

.MainDiv {
    height:25vh;
    background-color:transparent;
    width:50%;
    margin: 0 auto;
  text-align:center;
}
Comments