我有一个文本输入和一些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/
由于
答案 0 :(得分:0)
如果您不喜欢使用一点CSS,我建议将input-group
转换为块级元素,将input-group-addons
转换为内联元素。这样,您可以将text-center
与margin: 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>
希望这有帮助! :)