javascript - 在 div 中以 span 居中输入

Question

我有一些带有跨度的输入的 View 。

这是代码

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 {

position:relative；

边框折叠:分开；

我需要在父 div 中将 class="input-group date" 居中<​​/p>

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

但是现在我看到了这个

我怎样才能使它居中？

Answer 1

删除所有内联样式，只添加 form-inline 和 text-center 到 parent。 就是这样。

注意:请尽可能多地使用 bootstrap 并避免内联样式以获得预期的结果。 :)

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