跨度為div的中心輸入
[英]Center input with span in div
問題描述
我有一些跨度輸入的視圖。
這是代碼
div class="inner-right2-calendar" style="text-align: center">
<div class="input-group date" style="display: inline-block;" id="picker">
<input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment"/>
<span style="width: 20px; height: 33px;" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2">
<input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
<span style="width: 20px; height: 33px;" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
這是inner-right2-calendar CSS
.inner-right2-calendar {
background: #fafafa;
border-top-left-radius: 5px;
margin-top: 20px;
border-top-right-radius: 5px;
height: 30%;
width: 100%;
position: relative;
}
.input-group {
職位：相對
邊界崩潰：單獨； }
我需要在父div中將class="input-group date"居中
我嘗試使用text-align為父div並display: inline-block; 為孩子。
但是現在我看到了
我如何定中心？
3 個解決方案
解決方案1
1 已采納 2017-08-02 07:16:35
刪除所有內聯樣式，僅將form-inline和text-center到parent。 而已。
注意：請嘗試使用盡可能多的引導程序，並避免使用內聯樣式以獲取所需的結果。 :)
<div class="inner-right2-calendar form-inline text-center">
<div class="input-group date" id="picker">
<input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="input-group date" id="picker2">
<input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
解決方案2
0 2017-08-02 07:01:14
看起來.input-group.date具有固定的寬度。 在這種情況下，您可以執行以下操作：
.input-group.date
{
width: 200px; /* whatever the fixed width is */
margin: 0px auto;
display: block;
}
解決方案3
0 2017-08-02 07:06:54
解決方案
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="inner-right2-calendar" style="text-align: center"> <div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2"> <input id="endAppointment" type="text" class="form-control" placeholder="Enter Start Appointment" /> <span style="width: 20px; height: 33px;" class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2"> <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" /> <span style="width: 20px; height: 33px;" class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </body> </html>
阻止輸入文本字段中的字符，將輸入鏡像到span或div
[英]Block characters from input text field, mirror input into span or div
在contenteditable div中用span標簽包裝用戶輸入（輸入或粘貼）
[英]Wrap user's input (type or paste) with a span tag in contenteditable div
獲取所有孩子的當前價值/內容， <input /> 並且<span>，中</span> <div>
[英]Get current value / content of all children, <input /> and <span>, of <div>
將div垂直居中，然后如何使用jQuery清理輸入文本值？
[英]Vertically center a div, then how to clean up input text values with jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.