Twitter bootstrap 引导输入在CSS框中对齐

我的css框有问题，我创建了JSFIDLE

• 输入需要垂直和水平对齐
• 我需要制作一个响应性CSS框来控制div

这里是我的CSS：

 .CssBox .MargingBox input#MarginTop,
 .CssBox .BorderBox input#BorderTop,
 .CssBox .PaddingBox input#PaddingTop {
    left: 45%;
    top: 12px;
 }

 .CssBox .MargingBox input#MarginRight,
 .CssBox .BorderBox input#BorderRight,
 .CssBox .PaddingBox input#PaddingRight {
    top: 50%;
    right: 8px;
 }

 .CssBox .MargingBox input#MarginBottom,
 .CssBox .BorderBox input#BorderBottom,
 .CssBox .PaddingBox input#PaddingBottom {
    left: 46%;
    bottom: 6px;
 }

 .CssBox .MargingBox input#MarginLeft,
 .CssBox .BorderBox input#BorderLeft,
 .CssBox .PaddingBox input#PaddingLeft {
    top: 46%;
    left: 8px;
 }

---

我建议您不要使用Bootstraps CSS，而是使用您自己的使用Flex/Flexbox（）CSS，因为这样会有更好的结果。还可以使用媒体查询，以便在较小的显示器上正确显示该框/调整大小播放

上、右、下、左
值是不够的。您应该给出负的
边距
，并更改所有框的高度以获得此效果

如果输入框的宽度为
30px
且高度为
25px
，则应分别给出负边距
=宽度（或）高度/2

这里的工作小提琴：
如果您校正各种容器的高度，使高度和边距与父容器的高度正确相加，您可以使用它们将每个
移动到正确的位置。请注意，我必须更改
.MargingBox
以使用
内容框的默认值
否则，计算的宽度和高度包括
1px
边距，该边距将外部左右输入上移了
1px


.CssBox.MargingBox{
位置：相对位置；
边框：1px虚线#CCC；
高度：250px；
}
.CssBox.BorderBox{
位置：相对位置；
利润率：44px；
高度：162px；
背景色：#E3E7ED；
}
.CssBox.PaddingBox{
位置：相对位置；
顶部：44px；
利润率：44px；
高度：74px；
背景色：#FAFAFA；
}
.CssBox输入{
宽度：30px！重要；
高度：25px；
位置：绝对位置；
填充物：5px；
文本对齐：居中；
边界半径：0；
}
.CssBox.MargingBox输入#MarginTop、.CssBox.BorderBox输入#BorderTop、.CssBox.PaddingBox输入#PaddingTop{
左：计算（50%-30px）；
顶部：12px；
}
.CssBox.MargingBox输入#MarginRight、.CssBox.BorderBox输入#BorderRight、.CssBox.PaddingBox输入#PaddingRight{
顶部：计算值（50%-12.5px）；
右：8px；
}
.CssBox.MargingBox输入#MarginBottom.CssBox.BorderBox输入#BorderBottom.CssBox.PaddingBox输入#PaddingBottom{
左：计算（50%-30px）；
底部：6px；
}
.CssBox.MargingBox输入#MarginLeft、.CssBox.BorderBox输入#BorderLeft、.CssBox.PaddingBox输入#PaddingLeft{
顶部：计算值（50%-12.5px）；
左：8px；
}
.CssBox.MargingBox{
框大小：内容框；
}

这是由于
top
和
left
@amit的值不同造成的，是的，这是由于top和left的值不同而发生的：Dbetter将一行划分为7列并继续..@MohamedSamy这是因为您提供了所有3个主div的高度作为硬编码，并且您需要设置左-右-底-顶以除以其中的3，而此链接可能会回答这个问题，最好在这里包括答案的基本部分，并提供链接供参考。如果链接页面更改，只有链接的答案可能会无效。谢谢你，你救了我的命