居中沒有元素的div

我想居中一個沒有居中效果的DIV到DIV裏面的元素。居中沒有元素的div

在我的情況，我有這個輸入（選擇）：intl-tel-input

當我這樣做：

<center> 
<div id="input"> 
    <input id="phone" name="phone" type="tel"> 
</div> 
</center>

選擇的選項過於集中，選項甚至容器改變位置。

在這裏，我們有錯誤的例子：http://jsfiddle.net/DtMwr/15/

感謝的幫我弄明白。

2016-02-25 J. Arnold

你說你想以div爲中心，你的div在哪裏？中心標籤不應該被使用。 –

更新了DIV，如果不使用中心，那麼替換是什麼？ –

您可以使用CSS將表單輸入居中。像這樣的東西會工作：

CSS

.center { 
    margin: auto; 
    width: 50%; 
    border: 3px solid #73AD21; 
    padding: 10px; 
} 

input[name=phone1] { width: 100%; }

HTML

<div class="center"> 
    <input type="tel" placeholder="Primary Phone Number" class="input-large" id="p1" name="phone1"/> 
</div>

這將集中在其父項內的股利，並允許輸入擴大到了100％父div的寬度。您可以根據佈局的需要調整div的寬度。

有一些關於它的良好的閱讀這裏：

你可以看到它在這方面的工作JS小提琴：http://jsfiddle.net/igor_9000/DtMwr/20/

另外，如果你還沒有，你可能會考慮使用像引導框架，基金會等等。他們已經有了一個很好的框架來實現一個可以節省你一些時間的佈局。

希望有幫助！

2016-02-25 21:46:19

我已經嘗試過使用CSS：http://jsfiddle.net/DtMwr/16/但結果相同。你的例子不要正確地居中。任何修復？謝謝你的 –

我創建了一個小提琴作爲答案的一部分，你可以在這裏看到它：http://jsfiddle.net/igor_9000/DtMwr/18/最終你選擇的寬度將會受到其餘佈局的影響。 –

但我的寬度不固定，動態變化:( –

首先，不要使用中心作爲標籤。只需將它作爲一個帶ID的常規分區即可。

<div id="input_wrapper"> 
<div id="input"> 
    <input id="phone" name="phone" type="tel"> 
</div> 
</div>

然後，將外部div的寬度設爲100％，並將內部div的自動邊距設爲固定寬度。

#input_wrapper { 
    width: 100%; 
} 

#input_wrapper #input { 
    margin-right: auto; 
    margin-left: auto; 
    width: 100px; 
}

2016-02-25 21:47:15 Blade

這不正確，任何修復？ –

回答