B. Clay Shannon B. Clay Shannon - 7 months ago 10
HTML Question

How can I center just one element within a container?

I have to create this look (from a mockup):

enter image description here

Based on what I read here [CSS: center element within a <div> element, I tried this:

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


...but that produces this (everything centered):

enter image description here

Moving the "textaligncenter" class to just the button (the only element I want to center) like so:

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


...produces this (nothing centered):

enter image description here

How can I get the button, the whole button, and only the button, to center within the container?

Answer

You can do something like this:

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
}

Here's a workable example:

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>

Here are two invaluable references on centering things in CSS: