javascript - 以div为单位的中心输入

我有一些跨度输入的视图。

这是代码

div  class="inner-right2-calendar" style="text-align: center">
<div class="input-group date" style="display: inline-block;"  id="picker">
    <input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment"/>
        <span style="width: 20px; height: 33px;" class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
   </div>
<div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
    <span style="width: 20px; height: 33px;" class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

这是inner-right2-calendar的CSS

.inner-right2-calendar {
background: #fafafa;
border-top-left-radius: 5px;
margin-top: 20px;
border-top-right-radius: 5px;
height: 30%;
width: 100%;
position: relative;

}

.input-group {

职位：相对

边界崩溃：单独；
}

我需要在父div中将class="input-group date"居中

我尝试对父div使用text-align，对孩子使用display: inline-block;。

但是现在我看到了



我如何定中心？

最佳答案

删除所有内联样式，只需将form-inline和text-center添加到父级。而已。

注意：请尝试使用尽可能多的引导程序，并避免使用内联样式以获取所需的结果。 :)

<div class="inner-right2-calendar form-inline text-center">
  <div class="input-group date" id="picker">
    <input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
  <div class="input-group date" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>