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

【问题标题】：How can I center just one element within a container?如何在容器中仅将一个元素居中？
【发布时间】：2016-09-01 21:48:37
【问题描述】：

我必须创建这个外观（来自模型）：

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

...产生这个（没有居中）：

如何让按钮、整个按钮和仅按钮在容器内居中？

【问题讨论】：

标签： html css twitter-bootstrap razor centering

【解决方案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 中居中的宝贵参考资料：

【讨论】：

【解决方案2】：

您可以给按钮一个绝对位置（确保它的父级是相对位置），然后将其向右移动 50%，最后以按钮宽度 1/2 的左侧边距支持它。这是一个 CSS 示例：

.containerforproact {
  position: relative;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：