CODEWITHSUNDEEP
htmlcssalignment
CMArg
CMArg

Reputation: 1567

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?

.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; 	
}
<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>

fiddle here

Upvotes: 1

Views: 6714

Answers (3)

Kas Elvirov
Kas Elvirov

Reputation: 7980

You need to do two steps:

  • .container { text-align: center; ... }
  • .MainDiv { display: inline-block; ... }

.container{
display:flex;
text-align: center;
border: 1px solid black;
}

.MainDiv {
  display: inline-block;
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;    
}
<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>

Upvotes: 1

Leo the lion
Leo the lion

Reputation: 3065

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;
}

Upvotes: 2

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

You just need to add display: block to .SubmitGral

https://jsfiddle.net/wg9mdor8/6/

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

.MainDiv {/*ok*/
	height:25vh;
	background-color:transparent;
	width:50%;
	margin: 0 auto;
}
.SubmitGral {/*ok*/
	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; 	
    display: block;
}
	<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>

Upvotes: 1

Related Questions