div中的HTML中心元素

我想要两个样式的提交按钮（xx1和xx2）在div（MainDiv）中居中。我尝试了几件没有成功的事情。 margin: auto;或margin: 0 auto;应该做的伎俩。有谁知道为什么下面的代码不是在每个MainDiv中集中输入？div中的HTML中心元素

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

 
.MainDiv { 
 
\t height:25vh; 
 
\t background-color:transparent; 
 
\t width:50%; 
 
\t margin: 0 auto; 
 
} 
 
.SubmitGral { 
 
\t margin: 0 auto; 
 
\t height:90%; 
 
\t width:70%; 
 
\t border:none; 
 
    background-color:#6c3; 
 
\t font-size:1.4em; 
 
\t white-space: normal; 
 
\t 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; \t 
 
}

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

fiddle here

来源

2016-09-10 CMArg

你想让主div以容器为中心还是什么？ –

您是否因任何特定原因使用flexbox？ – spongessuck

每个输入集中在div class =“MainDiv” – CMArg

你只需要添加text-align:center到.MainDiv类和你做。

见here

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

来源

2016-09-10 13:12:19

利奥狮子，Artem Solovev和UncaughtTypeError答案都解决了我的问题。我一直呆在这里四个小时，所以谢谢你们所有人！将其标记为已接受，因为不能标记所有。 – CMArg

谢谢你的接受。 :) –

你只需要添加display: block到.SubmitGral

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

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

 
.MainDiv {/*ok*/ 
 
\t height:25vh; 
 
\t background-color:transparent; 
 
\t width:50%; 
 
\t margin: 0 auto; 
 
} 
 
.SubmitGral {/*ok*/ 
 
\t margin: 0 auto; 
 
\t height:90%; 
 
\t width:70%; 
 
\t border:none; 
 
    background-color:#6c3; 
 
\t font-size:1.4em; 
 
\t white-space: normal; 
 
\t 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; \t 
 
    display: block; 
 
}

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

来源

2016-09-10 13:10:45 UncaughtTypeError

你需要做两步：

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

来源

2016-09-10 13:14:26

div中的HTML中心元素

回答

相关问题