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

【问题标题】：CSS - Inline two divs and First Div should be at left and the second div should be at center positionCSS - 内联两个 div，第一个 div 应该在左边，第二个 div 应该在中心位置
【发布时间】：2019-10-07 10:49:14
【问题描述】：

我们需要提供两个内联 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>

它以两个 div 左对齐的状态显示 UI。

请提出建议。

【问题讨论】：

是否有必要使用 display:inline，因为 display:inline 元素不会占用宽度，所以不能居中 - 内联元素将接受边距和填充，但元素仍然像你可能的那样内联预计。边距和内边距只会将其他元素水平推开，而不是垂直推开。

标签： jquery html css styles text-align

【解决方案1】：

您可以使用为将显示您的界面的任何屏幕指定的宽度来实现相同的效果。话虽如此，考虑到全屏宽度为 100%，我们可以说left div 大约是 33.33%，center div 将是另外 33.33%，留下一个 right div 剩下的 33.33% .像这样设置分区大小，您可以定义使用这些类创建的 left 和 center div，如下所示。

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

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：