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

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" class 移动到按钮（我想要居中的唯一元素），如下所示：

<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 中居中的宝贵参考：

Answer 2

你可以给按钮一个绝对位置（确保它的父级是相对位置），然后将它向右移动 50%，最后用 margin-left 支持它，它是按钮宽度的 1/2按钮。这是一个 css 示例：

.containerforproact {
  position: relative;
}

button {
  position: absolute;
  left: 50%;
  width: 150px;
  margin-left: -75px;
}

Answer 3

我有点困惑，因为看起来一切都在模型中居中，但你说你只希望按钮居中。也就是说，您可以将按钮包装在具有 "textaligncenter" class 的 div 中。给按钮 text-align:center 只会影响按钮内的文本。只要按钮容器 div 是 "containerforproact" div 的宽度（它应该是），你就会得到你想要的外观。

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

How can I center just one element within a container?

html

css

centering

razor

twitter-bootstrap