div中的HTML中心元素

Question

我希望两个样式的提交按钮（xx1和xx2）在其div（MainDiv）中居中。我尝试了几件事但没有成功。 margin: auto;或margin: 0 auto;应该可以解决问题。有人知道为什么下面的代码没有在每个MainDiv中居中输入？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

fiddle here

Answer 1

您需要执行两个步骤：

• .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> 

date    day month   year    pcp1    pcp2    pcp3    pcp4    pcp5    pcp6
1.01.1979   1   1   1979    0.431   2.167   9.375   0.431   2.167   9.375
2.01.1979   2   1   1979    1.216   2.583   9.162   1.216   2.583   9.162
3.01.1979   3   1   1979    4.041   9.373   23.169  4.041   9.373   23.169
4.01.1979   4   1   1979    1.799   3.866   8.286   1.799   3.866   8.286
5.01.1979   5   1   1979    0.003   0.051   0.342   0.003   0.051   0.342
6.01.1979   6   1   1979    2.345   3.777   7.483   2.345   3.777   7.483
7.01.1979   7   1   1979    0.017   0.031   0.173   0.017   0.031   0.173
8.01.1979   8   1   1979    5.061   5.189   43.313  5.061   5.189   43.313

Answer 2

您只需将display: block添加到.SubmitGral

即可

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需将text-align:center添加到.MainDiv课程即可。

请参阅here

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