html - 如何在容器中仅居中一个元素？

Question

我必须创建这个外观(从模型):

根据我在这里阅读的内容 [ 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>
    . . .

...产生这个(没有居中):

如何让按钮、整个按钮以及只有按钮在容器中居中？

Answer 1

你可以这样做:

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 中居中的宝贵引用:

• W3C - CSS: centering things

• CSS-tricks - Centering in CSS