CSS - 内联两个 div 和第一个 div 应该在左边，第二个 div 应该在中心位置

Question

我们需要提供两个内联div，第一个div应该在左边，第二个div应该在同一行的中心。

<div style="margin-top:200px;">
<div align="left" style="display:inline;">
<label>Restrict to Primary Location:</label>
@(Html.Kendo().DropDownList()
.Name("ddl_restictToPrimaryLoc")
.DataTextField("Text")
.DataValueField("Value")
//.Events(e => e.Change("restictToPrimaryLocChange"))
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Yes",
Value = "1"
},
new SelectListItem() {
Text = "No",
Value = "0"
}})
.Value("1")
.HtmlAttributes(new { style = "width: 5%", @class = "form-control" }))
</div>
<div align="center" style="display:inline;">
<button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
</div>
</div>

它显示 UI 处于左侧两个div 对齐的状态。

请指教。

Answer 1

您可以使用flexbox，但是考虑到不知道您想要哪个中心(整行的中心或剩余空白空间的中心)，很难使第二个div保持居中。

.container{
display:flex;
}
.center-div{
flex-grow:1;
text-align:center;
}

<div style="margin-top:150px;" class="container">
<div align="left" style="display:inline;" class="left-div">
<label>Restrict to Primary Location:</label>      
</div>
<div style="display:inline;" class="center-div">
<button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
</div>
</div>

Answer 2

您可以使用为显示界面的任何屏幕指定的宽度来实现相同的目标。话虽如此，在全屏宽度被视为 100% 的情况下，我们可以说left div约为 33.33%，center div将是另外 33.33%，剩下的 33.33% 剩下 33.33% 的right div。这样设置分区大小，您可以定义使用这些类创建的left和centerdiv，如下所示。

#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:33.33%;
height: 20px;
}
#center {
display: inline-block;
margin:0 auto;
width:33.33%;
height: 20px;
}

<div id="container">
<div id="left">
<div class="form-group">
<label class="col-md-4 control-label" for="dropdown">Restrict to Primary Location:</label>
</div>
</div>
<div id="center">
<label class="col-md-4 control-label" for="btn_AddSelection"></label>
<div class="col-md-4">
<button id="btn_AddSelection" name="btn_AddSelection" class="btn btn-primary">Add Selection</button>
</div>
</div>

</div>