跨度为div的中心输入
[英]Center input with span in div
问题描述
I have View with some inputs with spans. 
我有一些跨度输入的视图。
Here is code 这是代码
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>
Here is css of inner-right2-calendar 这是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 {
position: relative; 职位：相对
border-collapse: separate; 边界崩溃：单独； } }
I need to center class="input-group date" in parent div 我需要在父div中将class="input-group date"居中
I try to do it with text-align for parent div and display: inline-block; 我尝试使用text-align为父div并display: inline-block; for children. 为孩子。
But now I see this 但是现在我看到了
How I can center it? 我如何定中心？
3 个解决方案
解决方案1
1 已采纳 2017-08-02 07:16:35
Remove all inline styles and just add form-inline and text-center to parent. 删除所有内联样式，仅将form-inline和text-center到parent。 That's it. 而已。
Note: Please try to use as much bootstrap as you can and avoid inline styling to get desired results. 注意：请尝试使用尽可能多的引导程序，并避免使用内联样式以获取所需的结果。 :) :)
<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
Looks like .input-group.date has a fixed width. 看起来.input-group.date具有固定的宽度。 In that case you can do: 在这种情况下，您可以执行以下操作：
.input-group.date
{
width: 200px; /* whatever the fixed width is */
margin: 0px auto;
display: block;
}
解决方案3
0 2017-08-02 07:06:54
Here the Solution 解决方案
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.