居中没有元素的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

这不正确，任何修复？ –

回答