我必须创建这个外观(从模型):
根据我在这里阅读的内容 [ CSS: center element within a <div> element ，我试过这个:
.textaligncenter {
text-align:center;
}
.platypuscenter {
margin:auto;
}
<div class="row">
<div class="col-md-6">
<div class="containerforproact leftmarginbreathingroom platypuscenter">
<h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
<label class="leftmarginbreathingroom">From</label>
<select class="dropdown" id="produsagefrom" name="produsagefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
if (i == 13)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>months back</label>
<label>to</label>
<select id="produsageto" name="produsageto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<br />
<button class="btn btn-sm orange textaligncenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
</div>
</div>
. . .
...但这会产生这个(一切都居中):
将“textaligncenter”类移动到按钮(我想要居中的唯一元素)，如下所示:
<div class="row">
<div class="col-md-6">
<div class="containerforproact leftmarginbreathingroom">
<h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
<label class="leftmarginbreathingroom">From</label>
<select class="dropdown" id="produsagefrom" name="produsagefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
if (i == 13)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>months back</label>
<label>to</label>
<select id="produsageto" name="produsageto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<br />
<button class="btn btn-sm orange textaligncenter platypuscenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
</div>
</div>
. . .
...产生这个(没有居中):
如何让按钮、整个按钮以及只有按钮在容器中居中？
最佳答案
你可以这样做:
button {
margin-left: 50%; // shifts the button to the right by 50% of container's width
transform: translateX(-50%); // shifts 50% of the button width to the left
}
这是一个可行的例子:
div {
width: 100%;
background: lightgreen;
}
button {
margin-left: 50%;
transform: translateX(-50%);
}<div class="row">
<div class="col-md-6">
<div class="containerforproact leftmarginbreathingroom">
<h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
<label class="leftmarginbreathingroom">From</label>
<select class="dropdown" id="produsagefrom" name="produsagefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
if (i == 13)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>months back</label>
<label>to</label>
<select id="produsageto" name="produsageto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<br />
<button class="btn btn-sm orange textaligncenter platypuscenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
</div>
</div>
</div>这里有两个关于在 CSS 中居中的宝贵引用:
关于html - 如何在容器中仅居中一个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37078845/