引導投入在CSS盒子

我有一個問題，我的CSS框對齊，我創建的jsfiddle引導投入在CSS盒子

輸入需要進行垂直對齊和水平
我需要做出響應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; 
}

來源

2015-08-24 Mohamed Samy

它正在發生，由於top'的'不同的價值觀和'left' –

@amit，是的，它是發生由於頂部不同的價值觀和左：d –

更好的劃分的行進入7列，並進行.. –

使用top, right, bottom, left值並不夠。您應該給予否定margin並更改所有框的高度以獲得此效果。

如果輸入框的寬度爲30px，高度爲25px，則應分別給它設置負邊距= width(or)height/2。

工作小提琴這裏：http://jsfiddle.net/MasoomS/xecps98v/1/

來源

2015-08-24 11:16:59 Masoom

謝謝你，你救了我一命 –

我建議你不使用CSS白手起家這個和使用Flex/Flexbox，就用你自己的（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）CSS，因爲這將有一個更好的結果。也可以使用媒體查詢，以便在較小的顯示屏上正確顯示/調整大小

來源

2015-08-24 10:56:37

雖然此鏈接可能會回答問題，最好在這裏包含答案的重要部分，並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 –

如果您糾正各種容器的高度，這樣的高度和利潤率正確加起來家長的高度，你可以使用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>

來源

2015-08-24 12:09:25 andyb

引導投入在CSS盒子

回答

相關問題