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

...但是这会产生这个（一切都集中在一起）：

移动＆＃34; textaligncenter＆＃34; 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
}

这是一个可行的例子：

＆＃13;

div {
  width: 100%;
  background: lightgreen;
}

button {
  margin-left: 50%;
  transform: translateX(-50%);
}

＆＃13;

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

＆＃13;

以下是关于CSS中心事物的两个宝贵参考资料：

Answer 2

你可以给按钮一个绝对的位置（确保它的父亲位置是相对的），然后将它向右移动50％，最后用一个宽度为1/2的边距向后移动它的按钮。这是一个例子：

＆＃13;

TASK [dns : Retrieve DNS record] ***********************************************
fatal: [10.13.25.12]: FAILED! => {"changed": false, "failed": true, "msg": "boto required for this module"}

＆＃13;

Answer 3

我有点困惑，因为似乎所有内容都在模型中居中，但是你说你只想让按钮居中。也就是说，您可以将按钮包含在具有“textaligncenter”类的div中。将text-align：center设置为按钮只会影响按钮内的文本。只要按钮容器div是“containerforproact”div的宽度（它应该是），你就会得到你想要的外观。

如何将一个元素集中在容器中？

3 个答案: