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％，剩下{{1} }，剩下的33.33％。这样设置分区大小，您可以定义使用这些类创建的right div和left div，如下所示。

center

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

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

2 个答案: