输入组 - 插件中断的文本中心

时间:2017-08-01 22:23:39

标签: css twitter-bootstrap-3

我有一个文本输入和一些input-group-addon元素。它默认看起来,但是当我尝试与文本中心对齐时,只有输入移动而不是输入组插件保持左对齐并且看起来完全错误。

我试过了中心块,但它做得更少(不会使任何组件居中)。我尝试包装其他div但没有运气。如果非常明显,我对css很新,所以道歉!

<div class="text-center">
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1"></span>
    <span class="input-group-addon" id="basic-addon2"></span>
    <span class="input-group-addon" id="basic-addon3"></span>
    <input id="password-input" type="password">
    <button id="password-submit" class="btn btn-default">Submit</button>
  </div>
</div>

小提琴:https://jsfiddle.net/m0L2cofg/2/

由于

1 个答案:

答案 0 :(得分:0)

如果您不喜欢使用一点CSS,我建议将input-group转换为块级元素,将input-group-addons转换为内联元素。这样,您可以将text-centermargin: 0 auto对齐。

我还向右边的最后一个margin给了它一个与下面例子中的提交按钮相同的偏移量:

.text-center {
  margin: 0 auto;
}

.text-center .input-group {
  display: block;
}

.text-center .input-group-addon {
  display: inline;
}

.text-center .input-group-addon:last-of-type {
  margin-right: 4px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1"></span>
    <span class="input-group-addon" id="basic-addon2"></span>
    <span class="input-group-addon" id="basic-addon3"></span>
    <input id="password-input" type="password">
    <button id="password-submit" class="btn btn-default">Submit</button>
  </div>
</div>

希望这有帮助! :)