Question

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

输入需要垂直和水平对齐
我需要制作一个响应式 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;
 }

Answer 1

使用top, right, bottom, left值是不够的。您应该给出负margin并更改所有框的高度以获得此效果。

如果输入框的宽度为30px且高度为25px，则应分别给出负边距= width(or)height/2。

在这里工作小提琴：http://jsfiddle.net/MasoomS/xecps98v/1/

Answer 2

如果您更正了各种容器的高度，以便高度和边距正确地与父级的高度相加，则可以使用calc将每个<input>移动到正确的位置。请注意，我必须更改.MargingBox以使用content-box;的默认box-sizing，否则计算出的宽度和高度包含1px边距，这会将外部左右输入向上移动1px。

.CssBox .MargingBox {
    position: relative;
    border: 1px dashed #CCC;
    height: 250px;
}
.CssBox .BorderBox {
    position: relative;
    margin: 44px;
    height:162px;
    background-color: #E3E7ED;
}
.CssBox .PaddingBox {
    position:relative;
    top:44px;
    margin: 44px;
    height:74px;
    background-color: #FAFAFA;
}
.CssBox input {
    width: 30px !important;
    height: 25px;
    position: absolute;
    padding: 5px;
    text-align: center;
    border-radius: 0;
}
.CssBox .MargingBox input#MarginTop, .CssBox .BorderBox input#BorderTop, .CssBox .PaddingBox input#PaddingTop {
    left: calc(50% - 30px);
    top: 12px;
}
.CssBox .MargingBox input#MarginRight, .CssBox .BorderBox input#BorderRight, .CssBox .PaddingBox input#PaddingRight {
    top: calc(50% - 12.5px);
    right: 8px;
}
.CssBox .MargingBox input#MarginBottom, .CssBox .BorderBox input#BorderBottom, .CssBox .PaddingBox input#PaddingBottom {
    left: calc(50% - 30px);
    bottom: 6px;
}
.CssBox .MargingBox input#MarginLeft, .CssBox .BorderBox input#BorderLeft, .CssBox .PaddingBox input#PaddingLeft {
    top: calc(50% - 12.5px);
    left: 8px;
}
.CssBox .MargingBox {
    box-sizing: content-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-body container">
    <div class="row-fluid">
        <div class="col-sm-8 CssBox">
            <div class="MargingBox">
                <input type="text" class="form-control margin_part" id="MarginTop" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginRight" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginBottom" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginLeft" placeholder="-">
                <div class="BorderBox">
                    <input type="text" class="form-control .padding_part" id="BorderTop" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderRight" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderBottom" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderLeft" placeholder="-">
                    <div class="PaddingBox row-fluid">
                        <input type="text" class="form-control" id="PaddingTop" placeholder="-">
                        <input type="text" class="form-control" id="PaddingRight" placeholder="-">
                        <input type="text" class="form-control" id="PaddingBottom" placeholder="-">
                        <input type="text" class="form-control" id="PaddingLeft" placeholder="-">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>

Answer 3

我建议您不要使用Bootstraps CSS并使用自己的Flex / Flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）CSS，因为这会有更好的结果。还可以使用媒体查询，以便在较小的显示/调整大小时正确显示该框

Bootstrap输入在CSS Box中对齐

3 个答案: