中心輸入與跨度在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

.inner-right2-calendar { 
background: #fafafa; 
border-top-left-radius: 5px; 
margin-top: 20px; 
border-top-right-radius: 5px; 
height: 30%; 
width: 100%; 
position: relative;

CSS}

.input-group {

位置：相對;

border-collapse：separate; }

我需要在父母的div

我嘗試用text-align父DIV和display: inline-block;爲孩子們做居中class="input-group date"。

但現在我看到這個

我怎樣才能居中？

來源

2017-08-02 Sukhomlin Eugene

提供了一個鏈接或創建一個小提琴 –

你想按鈕在中心？ – Aslam

輸入和跨度域@ hunzaboy –

刪除所有內嵌樣式，只是添加form-inline和text-center母公司。就是這樣。

注意：請儘量使用盡可能多的引導程序，並避免使用內聯樣式來獲得所需的結果。 :)

<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>

來源

2017-08-02 07:16:35 Aslam

看起來像.input-group.date有一個固定的寬度。在這種情況下，你可以這樣做：

.input-group.date 
{ 
    width: 200px; /* whatever the fixed width is */ 
    margin: 0px auto; 
    display: block; 
}

來源

2017-08-02 07:01:14 Meldon

'.input-group.date'有固定的寬度嗎？ – Meldon

nope，好像沒有 –

看看這個例子：https：//jsfiddle.net/6hhp2v0w/1/ 不要看顏色;）只要給'.input-group.date'一個固定的寬度， 'margin：0px auto'。應該是所有的一切！ – Meldon

這裏的解決方案

<!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>

來源

2017-08-02 07:06:54

填充左邊？你是這個意思？ –

這不是正確的解決方案 –

中心輸入與跨度在div

回答

相關問題