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